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 { signOut, useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import ImageNext from 'next/image'

export default function Menu() {
  const auth = useAuth()
  const router = useRouter()
  const { data: session } = useSession()

  const logout = () => {
    deleteAuth().then(() => {
      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/quotations'>
                {' '}
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
                  <p>Daftar Quotation</p>
                </div>
              </LinkItem>
              <LinkItem href='/my/transactions'>
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
                  <p>Daftar Transaksi</p>
                </div>
              </LinkItem>
              <LinkItem href='/my/shipments'>
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
                  <p>Daftar Pengiriman</p>
                </div>
              </LinkItem>
              <LinkItem href='/my/invoices'>
                {' '}
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
                  <p>Invoice & Faktur Pajak</p>
                </div>
              </LinkItem>
              <LinkItem href='/my/wishlist'>
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
                  <p>Wishlist</p>
                </div>
              </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='/'>
                {' '}
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
                  <p>Layanan Pelanggan</p>
                </div>
              </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'>
                <div className='flex gap-x-3 items-center'>
                  <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
                  <p>Daftar Alamat</p>
                </div>
              </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>
)