"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Dispatch, SetStateAction, useMemo, useState } from "react";
import { FaRegUserCircle } from "react-icons/fa";

import { Currency } from "@appTypes/StoreModel";
import AuthModal from "@components/AuthModal";
import { useStoreActions, useStoreState } from "@hooks/store";

function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
	const pathname = usePathname();
	const isActive = dropdownItems
		? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
		: pathname === href;

	return (
		<button className="flex items-center justify-center px-2 py-4 relative group">
			{dropdownItems ? (
				<span
					className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
				>
					{name}
				</span>
			) : (
				<Link
					href={href}
					className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
				>
					{name}
				</Link>
			)}
			{dropdownItems && (
				<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
					<ul>
						{dropdownItems.map((item) => {
							const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
							const isDropdownActive = pathname === itemHref;
							return (
								<li key={item}>
									<Link
										href={itemHref}
										className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
									>
										{item}
									</Link>
								</li>
							);
						})}
					</ul>
				</div>
			)}
		</button>
	);
}

export default function Navbar({}: // currencySelector,
{
	// currencySelector?: { selectedCurrency: string; setSelectedCurrency: Dispatch<SetStateAction<"GBP" | "USD" | "EUR">> };
}) {
	const pathname = usePathname();
	const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
	const setSelectedCurrency = useStoreActions((actions) => actions.currency.setSelectedCurrency);
	const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
	// const navOptions = useMemo(() => ["Earthquakes"], []);
	const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
	// { label: "Our Mission", path: "/our-mission" },
	// { label: "The Team", path: "/the-team" },
	// { label: "Contact Us", path: "/contact-us" }]

	const [isModalOpen, setIsModalOpen] = useState(false);

	const currencies = useStoreState((state) => state.currency.currencies);
	const currencyTickers = useStoreState((state) => state.currency.tickers);

	return (
		<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
			<div className="my-1 flex aspect-square ml-3 mr-3">
				<Link href="/" className="rounded-full">
					<Image height={50} width={50} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
				</Link>
			</div>
			<div className="flex">
				{navOptions.map((name) => (
					<NavbarButton name={name} href={`/${name.toLowerCase()}`} key={name} />
				))}
				<NavbarButton name="About Us" href="/about" dropdownItems={aboutDropdown} />
			</div>
			<div className="flex-grow" />

			{pathname.includes("shop") && (
				<button className="flex items-center justify-center mr-3 py-4 relative group">
					<span className={`px-4 py-1.5 rounded-md transition-colors`}>{selectedCurrency}</span>

					<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-24 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
						<ul>
							{currencies.map((item) => {
								let ticker = currencyTickers[item];
								return (
									<li key={item} onClick={() => setSelectedCurrency(item)}>
										<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>{`${item} (${ticker})`}</div>
									</li>
								);
							})}
						</ul>
					</div>
				</button>
			)}

			<button className="my-auto mr-4" onClick={() => setIsModalOpen(true)}>
				<FaRegUserCircle size={22} />
			</button>
			<AuthModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
		</div>
	);
}