import Image from 'next/image'
import MobileView from '../../views/MobileView'
import Link from '../Link/Link'
import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
import useSidebar from '@/core/hooks/useSidebar'
import dynamic from 'next/dynamic'
import IndoteknikLogo from '@/images/logo.png'
import { useEffect, useState } from 'react'
import { getCart, getCountCart } from '@/core/utils/cart'
import TopBanner from './TopBanner'

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

const NavbarMobile = () => {
  const { Sidebar, open } = useSidebar()

  const [cartCount, setCartCount] = useState(0)

  useEffect(() => {
    const handleCartChange = () => {
      const cart = async () => {
        const listCart = await getCountCart()
        setCartCount(listCart)
      }
      cart()
    }
    handleCartChange()

    window.addEventListener('localStorageChange', handleCartChange)

    return () => {
      window.removeEventListener('localStorageChange', handleCartChange)
    }
  }, [])

  return (
    <MobileView>
      <TopBanner />
      <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' className='relative'>
              <ShoppingCartIcon className='w-6 text-gray_r-12' />
              {cartCount > 0 && (
                <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
                  {cartCount}
                </span>
              )}
            </Link>
            <button type='button' aria-label='sidebarMenuButton' onClick={open}>
              <Bars3Icon className='w-6 text-gray_r-12' />
            </button>
          </div>
        </div>
        <Search />
      </nav>
      {Sidebar}
    </MobileView>
  )
}

export default NavbarMobile