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 IsAuth from '@/lib/auth/components/IsAuth'
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 (
    <IsAuth>
      <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/80'>
            <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>
            </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='/my/address'>Daftar Alamat</LinkItem>
            </div>

            <div
              onClick={logout}
              className='p-4 mt-2'
            >
              <button className='w-full btn-red'>Keluar Akun</button>
            </div>
          </div>
        </div>
      </AppLayout>
    </IsAuth>
  )
}

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

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