// import { styled } from 'solid-styled-components'

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

const language = useLanguage('vi')

const NAVBAR_ITEM = [
  {
    path: '/dashboard',
    icon: IconDashboard,
    text: language?.ui.dashboard,
  },
]

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">
      <label for="nav-menu" aria-label="close sidebar" class="drawer-overlay" />
      <div class="bg-base-200 w-80 min-h-full">
        <Show when={store.auth}>
          <div class="flex items-center justify-between px-5 pt-5 lg:hidden">
            <div class="avatar">
              <div class="w-9 mask mask-hexagon">
                <img
                  src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
                  alt="avatar"
                />
              </div>
            </div>
            <span class="mx-3 line-clamp-1">{store.userInfo?.name}</span>
            <button class="btn btn-ghost btn-sm" onClick={logOut}>
              <IconLogout size={16} />
            </button>
          </div>
          <div class="divider divider-success mb-0 lg:hidden">
            <IconTriangle size={30} />
          </div>
        </Show>
        <ul class="menu p-4 w-80 text-base-content">
          <For each={NAVBAR_ITEM}>
            {(item) => (
              <li>
                <A href={item.path}>
                  <Dynamic component={item.icon} />
                  {item.text}
                </A>
              </li>
            )}
          </For>
        </ul>
      </div>
    </div>
  )
}