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

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

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

  const [cartCount, setCartCount] = useState(0);
  const { loadCart, cart, summary, updateCartItem } = useCartStore();

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

  //   window.addEventListener('localStorageChange', handleCartChange);

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

  useEffect(() => {
    if(auth){
      loadCart(auth?.id);
    }
  }, [auth]);

  useEffect(() => {
    setCartCount(cart?.products?.length);
  }, [cart]);

  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}
              loading='eager'
            />
          </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;