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 (