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' aria-label='Wishlist'>
              <HeartIcon className='w-6 text-gray_r-12' />
            </Link>
            <Link href='/shop/cart' className='relative' aria-label='Cart'>
              <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;