"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 ${isScrolled ? "block" : "hidden"}`} />
              </Link>
              <div className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`}>
                {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