import { useSiteContext } from '@context/SiteContext'
import useAuth from '@hooks/useAuth'
import useLanguage from '@hooks/useLanguage'
import { A } from '@solidjs/router'
import {
  IconBuildingWarehouse,
  IconDashboard,
  IconHome,
  IconTriangle,
} from '@tabler/icons-solidjs'
import { For, Show, mergeProps } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import './navbar.scss'

const { language } = useLanguage()

export const NAV_ITEM = (admin = false) => [
  {
    path: '/dashboard',
    show: admin,
    icon: IconDashboard,
    text: language?.ui.dashboard,
  },
  {
    path: '/house',
    show: true,
    icon: IconHome,
    text: language?.ui.house,
  },
  {
    path: '/warehouse',
    show: true,
    icon: IconBuildingWarehouse,
    text: language?.ui.location,
  },
]

function NavbarItem(props) {
  const merged = mergeProps({ active: true }, props)
  return (
    <Show
      when={merged.active && merged.path}
      fallback={
        <>
          <Dynamic component={merged.icon} />
          {merged.text}
        </>
      }
    >
      <A class="hover:text-fu-black" href={merged.path}>
        <Dynamic component={merged.icon} />
        {merged.text}
      </A>
    </Show>
  )
}

function NavbarWithChildren(props) {
  return (
    <li class="mb-2">
      <h2 class="menu-title flex items-center gap-2">
        <NavbarItem {...props} active={false} />
      </h2>
      <ul class="pl-4">
        <For each={props.children}>
          {(child) => {
            if (!child.show) return
            if (child.children) {
              return <NavbarWithChildren {...child} />
            } else {
              return (
                <li class="mb-2">
                  <NavbarItem {...child} />
                </li>
              )
            }
          }}
        </For>
      </ul>
    </li>
  )
}

export default function Navbar() {
  const { store, setAuth } = useSiteContext()
  const { clickLogOut } = useAuth(setAuth)

  const logOut = async () => {
    try {
      await clickLogOut()
    } catch (error) {
      console.log({
        status: 'danger',
        title: 'Logout fail!',
        closable: false,
      })
    }
  }

  return (
    <div class="drawer-side lg:h-[calc(100svh-64px)]">
      <label for="nav-menu" aria-label="close sidebar" class="drawer-overlay" />
      <div class="bg-base-200 w-80 max-w-[90vw] min-h-full">
        <Show when={store.auth}>
          <div class="flex items-center px-3 pt-3 lg:hidden">
            <div class="dropdown dropdown-start flex mr-2">
              <div
                tabindex="0"
                role="button"
                class="btn btn-ghost btn-circle w-10 h-10 min-h-10 avatar"
              >
                <div class="w-8 rounded-full">
                  <img
                    src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}&background=fb9678`}
                    alt="avatar"
                  />
                </div>
              </div>
              <ul
                tabindex="0"
                class="mt-12 z-[1] p-2 shadow-md menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
              >
                <li class="border rounded-full mb-1">
                  <span class="menu-title text-black font-bold !py-1">
                    {store.userInfo?.name}
                  </span>
                </li>
                <li class="mb-1">
                  <A href="/me">Profile</A>
                </li>
                <li>
                  <a onClick={logOut}>Logout</a>
                </li>
              </ul>
            </div>
            <span class="text-black font-bold text-xl">
              {store.userInfo?.name}
            </span>
          </div>
          <div class="divider divider-success mb-0 mt-2 lg:hidden">
            <IconTriangle size={30} />
          </div>
        </Show>
        <ul class="menu w-full text-base-content pt-3 px-3 pb-6">
          <For each={NAV_ITEM(store?.userInfo?.isAdmin)}>
            {(item) => {
              if (!item.show) return
              if (item.children) {
                return <NavbarWithChildren {...item} />
              } else {
                return (
                  <li class="mb-2">
                    <NavbarItem {...item} />
                  </li>
                )
              }
            }}
          </For>
        </ul>
      </div>
    </div>
  )
}
