import { useState, useEffect } from "react";
import { FaTimes, FaBars } from "react-icons/fa";

import Logo from "../../assets/logo.svg";
import { useTranslation } from "react-i18next";

export default () => {
  const [state, setState] = useState(false);
  const { t, i18n } = useTranslation();

  const [colorChange, setColorChange] = useState(false);
 useEffect(() => {
    const changeColor = () => {
      if (window.scrollY >= 100) {
        setColorChange(true);
      } else {
        setColorChange(false);
      }
    };

    window.addEventListener("scroll", changeColor);

    const scrollPath = sessionStorage.getItem("scrollPath");
    if (scrollPath) {
      smoothScroll(scrollPath);
      sessionStorage.removeItem("scrollPath");
    }

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

  const navigation = [
    { title: t("navbar.services"), path: "Services" },
    { title: t("navbar.optimization"), path: "Optimization" },
    { title: t("navbar.advantages"), path: "Advantages" },
    { title: t("navbar.contact"), path: "Contact" },
  ];

  const handleNavigation = (path: string) => {
    if ((window.location.pathname === "/tos" || window.location.pathname === "/privacy") && navigation.some(navItem => navItem.path === path)) {
      sessionStorage.setItem("scrollPath", path);
      window.location.href = "/";
    }else{
      smoothScroll(path)
    }
  };

  const smoothScroll = (path :string) => {
    const element = document.getElementById(path);
    const navbarHeight = 110; // Replace with your navbar's height
    if (element) {
      const top =
        element.getBoundingClientRect().top + window.scrollY - navbarHeight;
      window.scrollTo({ top: top, behavior: "smooth" });
    }
  }

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <nav
      className={`${
        colorChange
          ? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
          : "z-10"
      }`}
    >
      <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
        <div className="flex items-center justify-between py-3 md:py-5 md:block">
          <a
            href="Top"
            onClick={(e) => {
              e.preventDefault(); // Prevent the default anchor tag behavior
              if (window.location.pathname === "/") {
                window.scrollTo({ top: 0, behavior: "smooth" });
              } else {
                window.location.href = "/";
              }
            }}
          >
            <img src={Logo} width={60} height={60} alt="logo" />
          </a>
          <div className="md:hidden">
            <button
              className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
              onClick={() => setState(!state)}
            >
              {state ? (
                <FaTimes className="h-6 w-6" />
              ) : (
                <FaBars className="h-6 w-6" />
              )}
            </button>
          </div>
        </div>
        <div
          className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col md:flex-row items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
            state
              ? colorChange
                ? "block bg-black bg-opacity-80 transition duration-500"
                : "block bg-gradient-to-br from-custom-bglight to-custom-bgdark"
              : "hidden md:flex"
          }`}
        >
          <ul className="text-text-gold space-y-8 md:ml-auto md:flex md:space-x-6 md:space-y-0 justify-center items-center">
            {navigation.map((item, idx) => {
              return (
                <li key={idx} className="hover:text-white">
                  <a
                    href={item.path}
                    className="block py-2 md:py-0 md:px-4 text-xl font-medium"
                    onClick={(e) => {
                      e.preventDefault(); // Prevent the default anchor tag behavior
                      setState(false); // Close the navigation
                      handleNavigation(item.path); // Navigate to the section
                    }}
                  >
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
          <button
            className="mt-5 md:mt-0 md:ml-auto"
            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
          >
            {i18n.language === "en" ? "PT" : "EN"}
          </button>
        </div>
      </div>
    </nav>
  );
};
