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 Quotationheader from '@/lib/quotation/components/QuotationHeader'
import Category from '@/lib/category/components/Category';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import {
ChevronDownIcon,
DocumentCheckIcon,
HeartIcon,
} from '@heroicons/react/24/outline';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import DesktopView from '../../views/DesktopView';
import Link from '../Link/Link';
import NavbarUserDropdown from './NavbarUserDropdown';
import NextImage from 'next/image';
import {
Button,
Menu,
MenuButton,
MenuItem,
MenuList,
useDisclosure,
} from '@chakra-ui/react';
import style from "./style/NavbarDesktop.module.css";
import useTransactions from '@/lib/transaction/hooks/useTransactions';
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 { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation, refreshQuotation, setRefreshQuotation } =
useProductCartContext();
const [pendingTransactions, setPendingTransactions] = useState([])
const [templateWA, setTemplateWA] = useState(null);
const [payloadWA, setPayloadWa] = useState(null);
const [urlPath, setUrlPath] = useState(null);
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 === 'draft'
);
useEffect(() => {
setProductQuotation(data);
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();
window.addEventListener('localStorageChange', handleCartChange);
return () => {
window.removeEventListener('localStorageChange', handleCartChange);
};
}, []);
useEffect(() => {
const handleQuotationChange = () => {
const quotation = async () => {
setQuotationCount(pendingTransactions?.length);
};
quotation();
};
handleQuotationChange();
window.addEventListener('localStorageChange', handleQuotationChange);
return () => {
window.removeEventListener('localStorageChange', handleQuotationChange);
};
}, [pendingTransactions]);
return (