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';
import whatsappUrl from '@/core/utils/whatsappUrl';
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/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>
              {(auth?.partnerTempo || auth?.tempoProgres == 'review') && (
                <LinkItem href='/my/tempo'>
                  {' '}
                  <div className='flex gap-x-3 items-center'>
                    <ImageNext
                      src='/images/icon/icon_tempo.svg'
                      width={18}
                      height={20}
                    />
                    <p>Pembayaran Tempo</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={whatsappUrl('', '', '')}>
                {' '}
                <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>
);