"use client";

import React, { useContext, useEffect, useState } from "react";
import { Menu, ShoppingBag, UserRound } from "lucide-react";
import { IoMdClose } from "react-icons/io";
import Link from "next/link";
import {
  NavigationMenu,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";
import FullWidthMenu from "./FullWidthMenu";
import MainContext from "@/app/contexts/mainContext";
import DynamicNavbar from "../dynamic-navbar/dynamicNavbar";
import SearchComponent from "../search/searchComponent";
import { useCurrency } from "@/app/contexts/currencyContext";
import CurrencySelect from "../dynamic-navbar/currencySelect";
import Image from "next/image";

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMounted, setIsMounted] = useState(false);
  const { token } = useContext(MainContext);
  const toggleMenu = () => setIsOpen(!isOpen);
  const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
    useCurrency();

  useEffect(() => {
    setIsMounted(true);
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 60);
    };

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

  if (!isMounted) {
    return null; // or a loading placeholder
  }

  return (
    <>
      <header className="fixed top-0 left-0 right-0 z-50 transition-all duration-200">
        <nav className={`bg-white p-4 ${isScrolled ? "shadow-lg" : ""}`}>
          <div className="container mx-auto flex justify-between items-center">
            <div className="flex items-center">
              <button onClick={toggleMenu} className="z-50">
                {isOpen ? (
                  <IoMdClose size={44} />
                ) : (
                  <Menu size={44} strokeWidth={1} />
                )}
              </button>
              <Link href={"/"} className="flex items-center space-x-2">
                <Image
                  src="/logo1.jpg"
                  alt="Logo"
                  width={56}
                  height={56}
                  className="object-contain"
                />
              </Link>
            </div>

            {!isOpen && (
              <div
                className={`hidden lg:flex items-center w-1/2 space-x-9 capitalize text-xl ${
                  isScrolled ? "opacity-100" : "opacity-0"
                } transition-opacity duration-200`}
              >
                <NavigationMenu className="text-xl">
                  <NavigationMenuList className="text-2xl">
                    <DynamicNavbar toggleMenu={toggleMenu} />
                  </NavigationMenuList>
                </NavigationMenu>
              </div>
            )}

            <div className="flex items-center space-x-4">
              <SearchComponent isScrolled={isScrolled} />
              <Link href="/pages/shopping-cart">
                <ShoppingBag size={20} className={`cursor-pointer `} />
              </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}
              />
            </div>
          </div>
        </nav>

        {!isOpen && (
          <div
            className={`sm:block hidden bg-white p-2 transition-all duration-300 ${
              isScrolled ? "opacity-0 h-0 overflow-hidden" : "opacity-100"
            }`}
          >
            <div className="container mx-auto flex justify-center items-center space-x-16">
              <DynamicNavbar toggleMenu={toggleMenu} />
            </div>
          </div>
        )}
      </header>

      <FullWidthMenu
        isOpen={isOpen}
        onClose={toggleMenu}
        isScrolled={isScrolled}
      />

      <div className="h-[104px] sm:h-[150px]"></div>
    </>
  );
};

export default Navbar;