import { useNavigate, useLocation } from "react-router-dom";
import Tab from "./Tab";
import { useEffect, useState } from "react";

type Tab = {
  link: string;
  label: string;
  id: number;
};

const tabs: Tab[] = [
  { link: "/technology", label: "Технологии", id: 1 },
  { link: "/directions", label: "Направления", id: 2 },
  { link: "/gallery", label: "Проекты", id: 3 },
  { link: "/clients", label: "Наши клиекнты", id: 4 },
  { link: "/blog", label: "Блог", id: 5 },
  { link: "/contacts", label: "Контакты", id: 6 },
  { link: "/vacancy", label: "Вакансии", id: 7 },
  { link: "/about", label: "О компании", id: 8 },
];

type TabsProps = {
  isHeader?: boolean;
};

const Tabs = ({ isHeader = false }: TabsProps) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleOnNavigateClick = (tab: string) => {
    return () => {
      navigate(tab);
    };
  };

  return (
    <>
      {isHeader ? (
        <HeaderTabs
          handleOnNavigateClick={handleOnNavigateClick}
          pathname={location.pathname}
        />
      ) : (
        <FooterTabs
          handleOnNavigateClick={handleOnNavigateClick}
          pathname={location.pathname}
        />
      )}
    </>
  );
};

type HeaderTabsProps = {
  handleOnNavigateClick: (tab: string) => () => void;
  pathname: string;
};

const HeaderTabs = ({ handleOnNavigateClick, pathname }: HeaderTabsProps) => {
  const [currentTab, setCurrentTab] = useState<Tab | undefined>(undefined);

  useEffect(() => {
    setCurrentTab(tabs.find((tab) => tab.link === pathname));
  }, [pathname]);

  return (
    <div className="flex flex-col self-end gap-2 items-lef w-[1440px] self-right mx-auto justify-center">
      <nav className="flex gap-[30px]">
        {tabs.map((tab) => {
          const isSelected = tab.link === pathname;

          return (
            <Tab
              className={`h-fit mr-auto duration-300 ${
                isSelected ? "text-[#bdbac4]" : "hover:text-[#fff]"
              }`}
              key={tab.id}
              value={tab.label}
              onClick={handleOnNavigateClick(tab.link)}
            />
          );
        })}
      </nav>
      <div
        className={`text-[16px] font-normal text-[#705a7f] flex gap-2 ${
          currentTab?.label ? "opacity-100" : "opacity-0"
        }`}
      >
        <div>Главная</div>{" "}
        <div className="text-[#bcb9c3]">/ {currentTab?.label}</div>
      </div>
    </div>
  );
};

type FooterTabsProps = {
  handleOnNavigateClick: (tab: string) => () => void;
  pathname: string;
};

const FooterTabs = ({ handleOnNavigateClick, pathname }: FooterTabsProps) => (
  <div className="flex self-center text-white font-semibold">
    <nav className="flex gap-7 items-center mx-auto py-5">
      {tabs.map((tab) => {
        const isSelected = tab.link === pathname;

        return (
          <Tab
            key={tab.id}
            value={tab.label}
            onClick={handleOnNavigateClick(tab.link)}
            className={`h-fit m-auto uppercase transition-all duration-300 text-[12px] ${
              isSelected ? "text-[#8675a8]" : "hover:text-[#E498FF]"
            }`}
          />
        );
      })}
    </nav>
  </div>
);

export default Tabs;
