rudarksh-frontend/components/header/Navbar.jsx

"use client";

import React, { useContext, useState, useEffect } from "react";
import Link from "next/link";
import { Menu, ShoppingBag, UserRound } from "lucide-react";
import authAxios, { backendUrl } from "@/utils/axios";
import { IoMdClose } from "react-icons/io";
import Image from "next/image";
import SearchComponent from "../search/searchComponent";
import ProductContext from "@/app/contexts/productContext";
import MainContext from "@/app/contexts/mainContext";
import { useCurrency } from "@/app/contexts/currencyContext";
import CurrencySelect from "../dynamic-navbar/currencySelect";

const Navbar = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const { category } = useContext(ProductContext);
  const { token } = useContext(MainContext);
  const [cartItemCount, setCartItemCount] = useState(0);
  const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES, error } =
    useCurrency();

  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);

  useEffect(() => {
    const handleScroll = () => {
      const isMobile = window.innerWidth < 768;

      setIsScrolled(isMobile || window.scrollY > 60);
    };

    handleScroll();

    window.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", handleScroll);

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

  const getCart = async () => {
    try {
      const response = await authAxios.get("/orders/cart/");
      const cartData = response.data;
      console.log(cartData);
      console.log(cartData.length);

      // Calculate total items in cart
      if (cartData && cartData.length > 0 && cartData[0].items) {
        const totalItems = cartData[0].items.reduce(
          (sum, item) => sum + item.quantity,
          0
        );
        setCartItemCount(totalItems);
      } else {
        setCartItemCount(0);
      }
    } catch (error) {
      console.error("Error fetching cart:", error);
      setCartItemCount(0);
    }
  };

  // Fetch cart data when component mounts and when token changes
  useEffect(() => {
    if (token) {
      getCart();
    } else {
      setCartItemCount(0);
    }
  }, [token]);

  // Set up an interval to periodically check for cart updates
  useEffect(() => {
    if (token) {
      // Initial fetch
      getCart();

      // Set up interval to check for updates every 3 seconds
      const intervalId = setInterval(getCart, 3000);

      // Clean up interval on component unmount
      return () => clearInterval(intervalId);
    }
  }, [token]);

  const categoryItems = category
    ? category.map((category) => ({
        label: category.category_name,
        url: `/collections/${category.id}`,
      }))
    : []; // Fallback to an empty array if category is undefined

  const consultation = {
    label: "Rudraksha consultation",
    url: "/products/premium-rudraksha-consultation-astrology",
  };

  const visibleItems = [...categoryItems.slice(0, 4), consultation];

  return (
    <>
      <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
        <div className="container mx-auto flex justify-between items-center p-4">
          <div className="flex items-center md:space-x-4">
            <button onClick={toggleSidebar} className="z-50">
              {isSidebarOpen ? (
                <IoMdClose size={28} />
              ) : (
                <Menu size={28} strokeWidth={1} />
              )}
            </button>
            <Link href="/">
              <Image
                src="/logo1.jpg"
                alt="Logo"
                width={60}
                height={60}
                className="!max-w-[60px]"
              />
            </Link>
          </div>

          <div className="flex items-center space-x-4">
            <SearchComponent isScrolled={isScrolled} />
            <Link href="/pages/shopping-cart" className="relative">
              <ShoppingBag size={20} className="cursor-pointer" />
              <span className="absolute -top-2 -right-2 bg-red-600 font-bold text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                {cartItemCount}
              </span>
            </Link>
            <div className="cursor-pointer">
              {token ? (
                <Link href="/accounts/profile">
                  <UserRound size={20} />
                </Link>
              ) : (
                <Link href="/accounts/login">
                  <button className="bg-[#c19a5b] text-white px-3 py-1 rounded hover:bg-[#b48943] text-sm">
                    Login
                  </button>
                </Link>
              )}
            </div>
            <CurrencySelect
              selectedCurrency={selectedCurrency}
              setSelectedCurrency={setSelectedCurrency}
              SUPPORTED_CURRENCIES={SUPPORTED_CURRENCIES}
              error={error}
            />
          </div>
        </div>

        <div className="py-2 ">
          <div className="container mx-auto flex justify-center items-center">
            <div className="flex space-x-4">
              {visibleItems.map((item) => (
                <Link
                  key={item.label}
                  href={item.url}
                  className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                >
                  {item.label}
                </Link>
              ))}
              <button
                onClick={toggleSidebar}
                className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
              >
                More
              </button>
            </div>
          </div>
        </div>
      </header>

      {isSidebarOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-40">
          <div className="fixed top-0 left-0 w-full h-full bg-white shadow-lg z-50 pt-32">
            <div className="p-4 h-full w-full md:w-1/2">
              <div
                style={{ justifyContent: "start" }}
                className="flex md:items-start md:!justify-between h-full flex-col flex-col-reverse md:flex-row"
              >
                <div className="mb-6 border-t md:border-0">
                  <h2 className="text-lg font-semibold mb-4">Quick Links</h2>
                  <ul className="space-y-2">
                    <li>
                      <Link
                        href="/products/premium-rudraksha-consultation-astrology"
                        onClick={toggleSidebar}
                        className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                      >
                        Get a Consultation
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/pages/certification-and-guarantee"
                        onClick={toggleSidebar}
                        className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                      >
                        Certification and Guarantee
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/pages/contact-us"
                        onClick={toggleSidebar}
                        className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                      >
                        Contact Us
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/blogs/blog"
                        onClick={toggleSidebar}
                        className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                      >
                        Blogs
                      </Link>
                    </li>
                  </ul>
                </div>

                <div className="mb-6 md:mb-0">
                  <h2 className="text-lg font-semibold mb-4">Categories</h2>
                  <ul className="space-y-2">
                    {categoryItems.map((item) => (
                      <li key={item.label}>
                        <Link
                          href={item.url}
                          onClick={toggleSidebar}
                          className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                        >
                          {item.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="h-[120px]"></div>
    </>
  );
};

export default Navbar;