path: root/src/core/components/elements/Navbar/NavbarDesktop.jsx

import { useProductContext } from '@/contexts/ProductContext';
import useAuth from '@/core/hooks/useAuth';
import { getCountCart } from '@/core/utils/cart';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
import IndoteknikLogo from '@/images/logo.png';
import Cardheader from '@/lib/cart/components/Cartheader';
import Category from '@/lib/category/components/Category';
import useTransactions from '@/lib/transaction/hooks/useTransactions';
import {
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  useDisclosure,
} from '@chakra-ui/react';
import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline';
import dynamic from 'next/dynamic';
import { default as Image, default as NextImage } from 'next/image';
import { useRouter } from 'next/router';
import { useCallback, useEffect, useState } from 'react';
import { useCartStore } from '~/modules/cart/stores/useCartStore';
import Quotationheader from '../../../../../src/lib/quotation/components/Quotationheader.jsx';
import DesktopView from '../../views/DesktopView';
import Link from '../Link/Link';
import NavbarUserDropdown from './NavbarUserDropdown';

const Search = dynamic(() => import('./Search'), { ssr: false });
const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });

const NavbarDesktop = () => {
  const [isOpenCategory, setIsOpenCategory] = useState(false);
  const auth = useAuth();

  const [cartCount, setCartCount] = useState(0);
  const [quotationCount, setQuotationCount] = useState(0);
  const [pendingTransactions, setPendingTransactions] = useState([]);
  const [templateWA, setTemplateWA] = useState(null);
  const [payloadWA, setPayloadWa] = useState(null);
  const [urlPath, setUrlPath] = useState(null);
  const { loadCart, cart, summary, updateCartItem } = useCartStore();
  const router = useRouter();

  const { product } = useProductContext();
  const { isOpen, onOpen, onClose } = useDisclosure();

  const query = {
    context: 'quotation',
    site: auth?.webRole === null && auth?.site ? auth.site : null,
  };

  const { transactions } = useTransactions({ query });
  const data = transactions?.data?.saleOrders.filter(
    (transaction) => transaction.status === 'waiting'
  );

  const [showPopup, setShowPopup] = useState(false);
  const [isTop, setIsTop] = useState(true);

  const handleTopBannerLoad = useCallback(() => {
    const showTimer = setTimeout(() => {
      setShowPopup(true);
    }, 500);

    const hideTimer = setTimeout(() => {
      // setShowPopup(false);
    }, 9500);

    return () => {
      clearTimeout(showTimer);
      clearTimeout(hideTimer);
    };
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      setIsTop(window.scrollY < 100);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

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

  useEffect(() => {
    setPendingTransactions(data);
  }, [transactions.data]);

  useEffect(() => {
    if (router.pathname === '/shop/product/[slug]') {
      setPayloadWa({
        name: product?.name,
        manufacture: product?.manufacture.name,
        url: createSlug('/shop/product/', product?.name, product?.id, true),
      });
      setTemplateWA('product');

      setUrlPath(router.asPath);
    }
  }, [product, router]);

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

    setCartCount(cart?.products?.length);

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

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

  useEffect(() => {
    const handleQuotationChange = () => {
      const quotation = async () => {
        setQuotationCount(pendingTransactions?.length);
      };
      quotation();
    };
    handleQuotationChange();

    window.addEventListener('localStorageChange', handleQuotationChange);

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

  return (
    <DesktopView>
      <TopBanner onLoad={handleTopBannerLoad} />
      <div className='py-2 bg-warning-400' id='desktop-nav-top'>
        <div className='container mx-auto flex justify-between'>
          <div className='flex items-start gap-5'>
            <div>
              <SocialMedias />
            </div>
          </div>
          <div className='flex gap-x-6'>
            <Menu isOpen={isOpen}>
              <MenuButton
                rightIcon={<ChevronDownIcon />}
                onMouseEnter={onOpen}
                onMouseLeave={onClose}
              >
                <div className='flex gap-x-1'>
                  <div>Fitur Layanan </div>
                  <ChevronDownIcon className='w-5' />
                </div>
              </MenuButton>
              <MenuList
                zIndex={100}
                onMouseEnter={onOpen}
                onMouseLeave={onClose}
              >
                <MenuItem as='a' href='/tentang-kami'>
                  Tentang Indoteknik
                </MenuItem>
                <MenuItem as='a' href='/pengajuan-tempo'>
                  Pengajuan Tempo
                </MenuItem>
              </MenuList>
            </Menu>
            {/* <Link href='/tentang-kami' className='!text-gray_r-12'>
              Tentang Indoteknik.com
            </Link>
            <Link href='/my/pembayaran-tempo' className='!text-gray_r-12'>
              Pembayaran Tempo
            </Link>
            <Link href='/' className='!text-gray_r-12'>
              Fitur Layanan
            </Link> */}
          </div>
        </div>
      </div>

      <nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'>
        <div className='container mx-auto flex gap-x-6'>
          <Link href='/' aria-label='Indoteknik Logo'>
            <Image
              src={IndoteknikLogo}
              alt='Indoteknik Logo'
              width={210}
              height={70}
              loading='eager'
              priority={true}
            />
          </Link>
          <div className='flex-1 flex items-center'>
            <Search />
          </div>
          <div className='flex gap-x-4 items-center'>
            <Quotationheader
              quotationCount={quotationCount}
              data={pendingTransactions}
            />

            <Cardheader cartCount={cartCount} />

            <Link
              target='_blank'
              rel='noreferrer'
              href='/my/wishlist'
              aria-label='Wishlist'
              className='flex items-center gap-x-2 !text-gray_r-12/80'
            >
              <HeartIcon className='w-7' />
              Wishlist
            </Link>
            <a
              href={whatsappUrl(templateWA, payloadWA, urlPath)}
              aria-label='Whatsapp'
              target='_blank'
              rel='noreferrer'
              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}
                loading='eager'
              />
              <div>
                <div className='font-semibold'>Whatsapp</div>
                0817 1718 1922 (Chat)
              </div>
            </a>
          </div>
        </div>

        <div className='container mx-auto mt-6'>
          <div className='flex'>
            <div
              onClick={() => setIsOpenCategory((isOpen) => !isOpen)}
              onBlur={() => setIsOpenCategory(false)}
              className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative'
            >
              <div>Kategori Produk</div>
              <ChevronDownIcon
                className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`}
              />

              <div
                className={`category-mega-box-wrapper ${
                  isOpenCategory ? 'show' : ''
                }`}
              >
                <Category />
              </div>
            </div>
            <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
              <Link
                href='/shop/promo'
                aria-label='Promo'
                className={`${
                  router.asPath === '/shop/promo' && 'bg-gray_r-3'
                }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
                target='_blank'
                rel='noreferrer'
              >
                {showPopup && (
                  <div className='w-full h-full relative justify-end items-start'>
                    <Image
                      src='/images/penawaran-terbatas.jpg'
                      alt='penawaran terbatas'
                      width={1440}
                      height={160}
                      quality={100}
                      // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12  p-2 z-50 transition-all duration-300 animate-pulse`}
                      className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
                      loading='eager'
                    />
                  </div>
                )}
                <span className='absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10'>
                  Semua Promo
                </span>
              </Link>
              {/* {showPopup && router.pathname === '/' && (
                <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}>
                  <p className='w-36 h-3'>
                    Penawaran Terbatas
                    </p>
                </div>
              )} */}

              <Link
                href='/shop/brands'
                aria-label='Brand'
                className={`${
                  router.asPath === '/shop/brands' && 'bg-gray_r-3'
                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                target='_blank'
                rel='noreferrer'
              >
                <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'>
                  Semua Brand
                </span>
              </Link>
              <Link
                href='/shop/search?orderBy=stock'
                aria-label='Ready Stock'
                className={`${
                  router.asPath.includes('/shop/search?orderBy=stock') &&
                  'bg-gray_r-3'
                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                target='_blank'
                rel='noreferrer'
              >
                <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'>
                  Ready Stock
                </span>
              </Link>
              <Link
                href='https://blog.indoteknik.com/'
                aria-label='Blog Indoteknik'
                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                target='_blank'
                rel='noreferrer noopener'
              >
                <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'>
                  Blog Indoteknik
                </span>
              </Link>
              {/* <Link
                href='/video'
                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
                target='_blank'
                rel='noreferrer'
              >
                Indoteknik TV
              </Link> */}
            </div>

            <div className='w-3/12 flex gap-x-1 relative'>
              {!auth && (
                <>
                  <Link
                    href='/login'
                    aria-label='Login'
                    className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                  >
                    Masuk
                  </Link>
                  <Link
                    href='/register'
                    aria-label='Register'
                    className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                  >
                    Daftar
                  </Link>
                </>
              )}
              {auth && (
                <>
                  <div
                    href='/'
                    className='navbar-user-dropdown-button'
                    aria-label='User'
                  >
                    <span>Halo, {auth?.name}</span>
                    <div className='ml-auto'>
                      <ChevronDownIcon className='w-6' />
                    </div>
                  </div>
                  <NavbarUserDropdown />
                </>
              )}
            </div>
          </div>
        </div>
      </nav>
    </DesktopView>
  );
};

const SocialMedias = () => (
  <div>
    {/* <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div> */}
    <div className='flex flex-wrap gap-3 items-start'>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.youtube.com/@indoteknikcom'
        aria-label='Youtube - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/youtube.webp'
          alt='Ytube'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.tiktok.com/@indoteknikcom'
        aria-label='TikTok - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/tiktok.png'
          alt='TikTok'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://x.com/indoteknikcom'
        aria-label='X - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/x-indoteknik.png'
          alt='X'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      {/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
        <NextImage
          src='/images/socials/Whatsapp.png'
          alt='Whatsapp - Indoteknik.com'
          width={24}
          height={24}
        />
      </a> */}
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.facebook.com/indoteknikcom'
        aria-label='Facebook - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/Facebook.png'
          alt='FB'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.instagram.com/indoteknikcom/'
        aria-label='Instagram - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/Instagram.png'
          alt='IG'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
        aria-label='Linkedin - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/Linkedin.png'
          alt='Linkedin'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
        aria-label='Maps - Indoteknik.com'
      >
        <NextImage
          src='/images/socials/g_maps.png'
          alt='Maps'
          width={24}
          height={24}
          loading='eager'
        />
      </a>
      
    </div>
  </div>
);

export default NavbarDesktop;