import Divider from "@/core/components/elements/Divider/Divider"
import Link from "@/core/components/elements/Link/Link"
import AppLayout from "@/core/components/layouts/AppLayout"
import useAuth from "@/core/hooks/useAuth"
import { deleteAuth } from "@/core/utils/auth"
import { ChevronRightIcon, UserIcon } from "@heroicons/react/24/solid"
import { useRouter } from "next/router"

export default function Menu() {
  const auth = useAuth()
  const router = useRouter()

  const logout = () => {
    deleteAuth()
    router.push('/login')  
  }

  return (
    <AppLayout title="Menu Utama">
      <Link href="/my/profile" className="p-4 flex items-center">
        <div className="rounded-full p-3 bg-gray_r-6 text-gray_r-12/90">
          <UserIcon className="w-5" />
        </div>
        <div className="ml-4">
          <div className="font-semibold text-gray_r-12">{ auth?.name }</div>
          { auth?.company && (
            <div className="badge-solid-red mt-1">Akun Bisnis</div>
          ) }
          { !auth?.company && (
            <div className="badge-gray mt-1">Akun Individu</div>
          ) }
        </div>
        <div className="ml-auto !text-gray_r-12">
          <ChevronRightIcon className="w-6" />
        </div>
      </Link>

      <Divider />

      <div className="flex flex-col gap-y-6 py-6">
        <div>
          <MenuHeader>
            Aktivitas Pembelian
          </MenuHeader>

          <div className="divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4">
            <LinkItem href="/my/transactions">
              Daftar Transaksi
            </LinkItem>
            <LinkItem href="/my/invoices">
              Invoice & Faktur Pajak
            </LinkItem>
            <LinkItem href="/my/wishlist">
              Wishlist
            </LinkItem>
          </div>
        </div>

        <div>
          <MenuHeader>
            Pusat Bantuan
          </MenuHeader>

          <div className="divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4">
            <LinkItem href="/">
              Customer Support
            </LinkItem>
            <LinkItem href="/">
              F.A.Q
            </LinkItem>
          </div>
        </div>

        <div>
          <MenuHeader>
            Pengaturan Akun
          </MenuHeader>

          <div className="divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4">
            <LinkItem href="/">
              Daftar Alamat
            </LinkItem>
            <LinkItem href="/">
              Ubah Password
            </LinkItem>
            <div onClick={logout} className="!text-gray_r-11 font-normal p-4 flex items-center">
              Keluar Akun
            </div>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}

const MenuHeader = ({ children, ...props }) => (
  <div {...props} className="font-medium px-4 flex">
    { children }

  </div>
)

const LinkItem = ({ children, ...props }) => (
  <Link {...props} className="!text-gray_r-11 font-normal p-4 flex items-center">
    { children }
    <div className="ml-auto !text-gray_r-11">
      <ChevronRightIcon className="w-5" />
    </div>
  </Link>
)