import {
  ChevronDownIcon,
  HeartIcon,
  ShoppingCartIcon,
  DocumentCheckIcon
} from '@heroicons/react/24/outline'
import Link from '../Link/Link'
import Image from 'next/image'
import DesktopView from '../../views/DesktopView'
import dynamic from 'next/dynamic'
import IndoteknikLogo from '@/images/logo.png'
import Category from '@/lib/category/components/Category'
import { useState } from 'react'
import useAuth from '@/core/hooks/useAuth'
import NavbarUserDropdown from './NavbarUserDropdown'

const Search = dynamic(() => import('./Search'))

const NavbarDesktop = () => {
  const [isOpenCategory, setIsOpenCategory] = useState(false)
  const auth = useAuth()

  return (
    <DesktopView>
      <div className='py-3 bg-yellow_r-10/60'>
        <div className='container mx-auto flex justify-between'>
          <Link href='/' className='!text-gray_r-12'>
            Tentang Indoteknik.com
          </Link>
          <div className='flex gap-x-6'>
            <Link href='/' className='!text-gray_r-12'>
              Pembayaran Tempo
            </Link>
            <Link href='/' className='!text-gray_r-12'>
              F.A.Q
            </Link>
            <Link href='/' className='!text-gray_r-12'>
              Fitur Layanan
            </Link>
          </div>
        </div>
      </div>

      <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
        <div className='container mx-auto flex gap-x-6'>
          <Link href='/'>
            <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={180} height={60} />
          </Link>
          <Search />
          <div className='flex gap-x-4'>
            <Link href='/my/transactions' className='flex items-center gap-x-2 !text-gray_r-12/80'>
              <DocumentCheckIcon className='w-7' />
              Pending
              <br />
              Quotation
            </Link>
            <Link href='/shop/cart' className='flex items-center gap-x-2 !text-gray_r-12/80'>
              <ShoppingCartIcon className='w-7' />
              Keranjang
              <br />
              Belanja
            </Link>
            <Link href='/my/wishlist' className='flex items-center gap-x-2 !text-gray_r-12/80'>
              <HeartIcon className='w-7' />
              Wishlist
            </Link>
            <a href='https://wa.me/628' className='flex items-center gap-x-1 !text-gray_r-12/80'>
              <Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} />
              <div>
                <div className='font-semibold'>Order Via WA</div>
                0812 8080 622 (Chat)
              </div>
            </a>
          </div>
        </div>
      </nav>

      <div className='container mx-auto mt-6'>
        <div className='flex bg-gray_r-2'>
          <button
            type='button'
            onClick={() => setIsOpenCategory((isOpen) => !isOpen)}
            onBlur={() => setIsOpenCategory(false)}
            className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center relative'
          >
            <div>Kategori Produk</div>
            <ChevronDownIcon className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} />

            <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}>
              <Category />
            </div>
          </button>
          <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
            <Link
              href='/'
              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
            >
              Promo Produk
            </Link>
            <Link
              href='/shop/brands'
              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
            >
              Semua Brand
            </Link>
            <Link
              href='/'
              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
            >
              Ready Stock
            </Link>
            <Link
              href='/'
              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
            >
              Blog Indoteknik
            </Link>
          </div>

          <div className='w-3/12 flex gap-x-1 relative'>
            {!auth && (
              <>
                <Link
                  href='/login'
                  className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
                >
                  Masuk
                </Link>
                <Link
                  href='/register'
                  className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
                >
                  Daftar
                </Link>
              </>
            )}
            {auth && (
              <>
                <div href='/' className='navbar-user-dropdown-button'>
                  <span>Halo, {auth?.name}</span>
                  <div className='ml-auto'>
                    <ChevronDownIcon className='w-6' />
                  </div>
                </div>
                <NavbarUserDropdown />
              </>
            )}
          </div>
        </div>
      </div>
    </DesktopView>
  )
}

export default NavbarDesktop