import dynamic from 'next/dynamic'
import Image from 'next/image'
import IndoteknikLogo from '@/images/logo.png'
import {
  Bars3Icon,
  ChevronDownIcon,
  DocumentCheckIcon,
  HeartIcon,
  ShoppingCartIcon
} from '@heroicons/react/24/outline'
import Link from '../Link/Link'
import useSidebar from '@/core/hooks/useSidebar'
import MobileView from '../../views/MobileView'
import DesktopView from '../../views/DesktopView'

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

const Navbar = () => {
  const { Sidebar, open } = useSidebar()
  return (
    <>
      <MobileView>
        <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
          <div className='flex justify-between items-center mb-2'>
            <Link href='/'>
              <Image
                src={IndoteknikLogo}
                alt='Indoteknik Logo'
                width={120}
                height={40}
              />
            </Link>
            <div className='flex gap-x-3'>
              <Link href='/my/wishlist'>
                <HeartIcon className='w-6 text-gray_r-12' />
              </Link>
              <Link href='/shop/cart'>
                <ShoppingCartIcon className='w-6 text-gray_r-12' />
              </Link>
              <button
                type='button'
                onClick={open}
              >
                <Bars3Icon className='w-6 text-gray_r-12' />
              </button>
            </div>
          </div>
          <Search />
        </nav>
        {Sidebar}
      </MobileView>

      <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'>
            <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center'>
              <div>Kategori Produk</div>
              <button
                type='button'
                className='ml-auto pl-3'
              >
                <ChevronDownIcon className='w-6' />
              </button>
            </div>
            <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='/'
                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'>
              <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>
            </div>
          </div>
        </div>
      </DesktopView>
    </>
  )
}

export default Navbar