"use client";

import { useTranslations } from "next-intl";
import Container from "../container";
import { NavbarMenueItem } from "@/types/shared";
import { Link } from "@/i18n/routing";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import Language from "./components/language";
import Currencies from "./components/currencies";
import { Icon } from "@iconify/react";
import AsideMenu from "./components/aside-menu";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import menu from "@/public/assets/menu.svg";
import menuBlack from "@/public/assets/img/menuBlack.svg";
import MainLink from "../main-link";

const Header = ({ lang }: { lang: string }) => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const t = useTranslations("Header");
  const menuItems: NavbarMenueItem[] = [
    { value: t("homeLink"), path: "/" },
    { value: t("aboutUs"), path: "/about-us" },
    { value: t("services"), path: "/services" },
    { value: t("news"), path: "/news" },
    { value: t("contactUs"), path: "/contact-us" },
    // { value: t("profile"), path: "/profile" },
    // { value: t("myAccount"), path: "/my-account" },
  ];

  // in (single blog | developer)

  const pathname = usePathname();
  let place = pathname.split("/").pop();
  // const place = "other-page"
  // // @ts-ignore

  let inSingleBlogPage = pathname.includes("blogs/");

  let logoPath =
    place === "contact-us"
      ? "/logo.svg"
      : place === "developer"
      ? "/logoGold.svg"
      : "/Legacy Logo Desktop.svg";

  const isSingleBlog =
    pathname.includes("blogs") && place !== undefined && place !== "blogs";

  if (isSingleBlog) {
    place = "single-blog";

    logoPath = "/logoBlack.svg";
  }

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 2) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);

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

  const iconColor = inSingleBlogPage
    ? isScrolled
      ? "white"
      : "black"
    : "white";

  return (
    <>
      <AsideMenu
        iconColor={iconColor}
        lang={lang}
        open={open}
        setOpen={setOpen}
      />
      <div
        className={`bg-transparent py-[30px] lg:py-[31px]  fixed w-full  z-[99] px-5 lg:px-0 ${
          inSingleBlogPage ? "text-black" : "text-white"
        } ${isScrolled ? "!bg-black/50 backdrop-blur-sm  shadow-lg " : ""} `}
      >
        <Container>
          <nav className="flex items-center justify-between  relative h-full">
            {/* menu icon */}
            <div className="flex  items-center gap-[20px]  xs:w-[100px] md:w-[150px] lg:w-[250px] text-base">
              <div
                className="flex items-center justify-center gap-5 cursor-pointer"
                onClick={() => setOpen(!open)}
              >
                <Image
                  className="w-[20px] h-[20px]"
                  src={iconColor === "black" ? menuBlack : menu}
                  width={20}
                  height={20}
                  alt="currency"
                />
              </div>
              {/* <ul className="flex  gap-6 items-center ">
                                {menuItems?.map((item: NavbarMenueItem) => (
                                    <li key={item?.value}>
                                        <Link href={item.path}>{item.value}</Link>
                                    </li>
                                ))}
                            </ul> */}
            </div>

            <MainLink href="/" locale={lang} className=" w-full">
              <Image
                src={logoPath}
                width={180}
                height={180}
                alt={"logo"}
                className={`h-[40px] w-[160px] object-cover absolute  left-[50%] translate-x-[-50%] lg-left-0 top-[50%] translate-y-[-50%] lg-top-0 ${
                  isScrolled ? "opacity-0" : "opacity-100"
                } duration-1000`}
                priority
              />
              <Image
                src={"/wolfwhite.png"}
                width={150}
                height={150}
                alt={"logo"}
                className={`h-[40px] w-[115px] object-cover absolute left-[50%] translate-x-[-50%] lg-left-0 top-[50%] translate-y-[-50%] lg-top-0 ${
                  isScrolled ? "opacity-100" : "opacity-0"
                } duration-1000`}
                priority
              />
            </MainLink>

            <div
              className={`flex items-center justify-center lg:justify-end md:gap-4  md:w-[150px] lg:w-[250px] ${
                inSingleBlogPage
                  ? isScrolled
                    ? "text-white"
                    : "text-black"
                  : "text-white"
              }`}
            >
              <div className="hidden md:block">
                {/* <Currencies iconColor={inSingleBlogPage ? (isScrolled ? "white" : "black") : "white"} /> */}
                {"AED"}
              </div>
              <Language
                iconColor={
                  inSingleBlogPage ? (isScrolled ? "white" : "black") : "white"
                }
              />
              {/* <Button className="bg-initialBg px-10 text-primary h-[44px] border border-primary">
                            {t("register")}
                        </Button>
                        <Button className="bg-primaryBg px-10 text-initial h-[44px]">{t("login")}</Button> */}
            </div>
          </nav>
        </Container>
      </div>
    </>
  );
};

export default Header;