import { useRouter } from 'next/router';
import Link from '../Link/Link';
import {
  HomeIcon,
  Bars3Icon,
  ShoppingCartIcon,
  ChevronLeftIcon,
} from '@heroicons/react/24/outline';
import { useEffect, useState } from 'react';
import { getCart, getCountCart } from '@/core/utils/cart';
import useTransactions from '@/lib/transaction/hooks/useTransactions';
import { useCartStore } from '~/modules/cart/stores/useCartStore';
import useAuth from '@/core/hooks/useAuth';

/**
 * The AppBar component is a navigation component used to display a header or toolbar
 * in a web application.
 *
 * @param {Object} props - Props received by the component.
 * @param {string} props.title - The title to be displayed on the AppBar.
 * @returns {JSX.Element} - Rendered AppBar component.
 */
const AppBar = ({ title }) => {
  const router = useRouter();
  const auth = useAuth();
  const { cart } = useCartStore();
  const query = {
    context: 'quotation',
    site: auth?.webRole === null && auth?.site ? auth.site : null,
  };
  const [cartCount, setCartCount] = useState(0);
  const { transactions } = useTransactions({ query });
  useEffect(() => {
    const handleCartChange = () => {
      const cart = async () => {
        const listCart = await getCountCart();
        setCartCount(listCart);
      };
      cart();
    };
    handleCartChange();

    window.addEventListener('localStorageChange', handleCartChange);

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

  return (
    <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
      <div className='flex items-center'>
        <button type='button' className='p-4' onClick={() => router.back()}>
          <ChevronLeftIcon className='w-6 stroke-2' />
        </button>
        <div className='font-medium text-h-sm line-clamp-1'>{title}</div>
      </div>
      <div className='flex items-center px-2'>
        <Link href='/shop/cart' className='py-4 px-2'>
          <div 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>
            )}
          </div>
        </Link>
        <Link href='/' className='py-4 px-2'>
          <HomeIcon className='w-6 text-gray_r-12' />
        </Link>
        <Link href='/my/menu' className='py-4 px-2'>
          <Bars3Icon className='w-6 text-gray_r-12' />
        </Link>
      </div>
    </nav>
  );
};

export default AppBar;