"use client";

import { useAuth } from "@/context/helpers/auth/AuthContext";
import { useState } from "react";
import SearchModal from "@/layouts/layout-2/components/header/navbar/SearchModal";
import TopBar from "@/layouts/layout-2/components/header/topbar";
import NavbarLogo from "@/layouts/layout-2/components/header/navbar/NavbarLogo";
import MobileIconButton from "@/layouts/layout-2/components/header/mobile/MobileIconButton";
import NavIconLink from "@/layouts/layout-2/components/header/navbar/NavIconLink";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { useTranslation } from "react-i18next";
import CategoriesDropdown from "@/layouts/layout-1/components/header/navbar/CategoriesDropdown";
import NavbarMenu from "@/layouts/layout-7/components/NavbarMenu";

export default function SharedNavbar({
  reversed = false,
  className = "",
  navClassName = "",
  headerContent = false,
}) {
  const { t } = useTranslation("header");
  const { user } = useAuth();
  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);

  const iconsSection = (
    <section
      className={cn(
        "flex items-center justify-between gap-4",
        reversed && "flex-row-reverse"
      )}
    >
      <div className="hidden lg:block">
        <Button
          variant="none"
          onClick={() => setIsSearchModalOpen(true)}
          className="flex gap-1 items-center relative cursor-pointer p-0"
          aria-label={t("nav.search")}
        >
          <Image
            src="/images/search.svg"
            alt="search"
            width={25}
            height={22}
            className="w-[25px] h-[22px]"
          />
          <p className="hidden lg:block">{t("nav.search")}</p>
        </Button>
      </div>

      <NavIconLink
        href="/compare"
        iconSrc="/images/compare.svg"
        label={t("nav.compare")}
        iconAlt="compare"
      />

      <NavIconLink
        href="/wishlist"
        iconSrc="/images/wishlist.svg"
        label={t("nav.wishlist")}
        iconAlt="heart"
      />

      <NavIconLink
        href="/cart"
        iconSrc="/images/cart.svg"
        label={t("nav.cart")}
        iconAlt="cart"
      />

      <div className="hidden lg:block">
        {user ? (
          <NavIconLink
            href="/account"
            iconSrc="/images/user.svg"
            label={t("nav.account")}
            iconAlt="account"
          />
        ) : (
          <NavIconLink
            href="/account/login"
            iconSrc="/images/user.svg"
            label={t("nav.login")}
            iconAlt="account"
          />
        )}
      </div>

      <MobileIconButton iconSrc="/images/list.svg" alt="menu" />
    </section>
  );

  const categoriesSection = (
    <div className="hidden lg:block">
      {headerContent ? <NavbarMenu /> : <CategoriesDropdown />}
    </div>
  );

  return (
    <header className={cn("bg-[#000000] text-[#EAEAEA] w-full", className)}>
      <TopBar />
      <nav
        className={cn(
          "container flex items-center justify-between w-full max-w-screen-2xl px-4 xl:px-10 py-3 mx-auto lg:py-8",
          navClassName
        )}
      >
        {!reversed ? (
          <>
            {categoriesSection}
            <NavbarLogo />
            {iconsSection}
          </>
        ) : (
          <>
            {iconsSection}
            <NavbarLogo />
            {categoriesSection}
          </>
        )}
      </nav>

      <SearchModal
        open={isSearchModalOpen}
        onOpenChange={setIsSearchModalOpen}
      />
    </header>
  );
}