import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import Button from "./Button";
import robotLogo from "../../assets/images/robot-logo.png";
import { BsNewspaper, BsGithub } from "react-icons/bs";
import Whitepaper from "../../assets/Whitepaper.pdf";
import { MdLanguage } from "react-icons/md";
import { locales, resources } from "../../i18n/i18n";
import { HashLink } from "react-router-hash-link";
import { Link } from "react-router-dom";

type Props = {};

const menuItems = [
  {
    name: "Home",
    path: "/",
    id: "home",
  },
  {
    name: "About",
    path: "/",
    id: "about",
  },
  {
    name: "Roadmap",
    path: "/",
    id: "roadmap",
  },
  {
    name: "Tokenomics",
    path: "/",
    id: "tokenomics",
  },
];
const menuSGPTProducts = [
  {
    name: "SGPT for Healthcare",
    path: "healthcare",
  },
];

const Header = (props: Props) => {
  const [isScrolled, setIsScrolled] = React.useState(false);
  const [isOpenMenu, setIsOpenMenu] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  const { i18n } = useTranslation();
  const currentLanguage = locales[i18n.language as keyof typeof locales];
  const languages = Object.keys(resources);
  React.useEffect(() => {
    // check is mobile
    if (window.innerWidth <= 1024) {
      setIsMobile(true);
    } else {
      setIsMobile(false);
    }
    console.log(window.innerWidth);

    if (window.innerWidth <= 1024) {
      setIsScrolled(true);
    } else {
      window.addEventListener("scroll", () => {
        if (window.scrollY > 0) {
          setIsScrolled(true);
        } else {
          setIsScrolled(false);
        }
      });
    }
  }, [window.innerWidth]);

  const jumpToSection = (section: string) => {
    const element = document.getElementById(section);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      setIsOpenMenu(!isOpenMenu);
    }
  };
  const backToHome = () => {
    const element = document.getElementById("home");
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  const openLocalPdf = () => {
    const pdf = Whitepaper;
    window.open(pdf);
  };
  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };
  return (
    <>
      {isScrolled ? (
        <div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
          <div className="container md:gap-2 mx-auto flex justify-between items-center xl:w-[90%] ">
            <div
              className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
              onClick={() => backToHome()}
            >
              <div className="bg-white w-8 rounded-full overflow-hidden p-1 ">
                <img
                  src={robotLogo}
                  className="w-full transition-all duration-150 rounded-full"
                  alt=""
                />
              </div>
              <h4 className="text-xl transition-all duration-150 text-white hover:text-orange-400  uppercase font-bold">
                SGPT
              </h4>
            </div>

            {
              // Mobile menu
              isMobile ? (
                <div
                  className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer"
                  onClick={() => setIsOpenMenu(!isOpenMenu)}
                >
                  <div className="w-6 h-1 bg-white rounded-full"></div>
                  <div className="w-6 h-1 bg-white rounded-full"></div>
                  <div className="w-6 h-1 bg-white rounded-full"></div>
                </div>
              ) : (
                <>
                  <div className="flex lg:gap-4 gap-10 items-center">
                    <ul className="flex lg:gap-8   ">
                      {menuItems.map((item) => (
                        <HashLink
                          to={`${item.path}#${item.id}`}
                          className="flex my-auto item-center"
                        >
                          <li
                            className="flex my-auto item-center"
                            key={item.path}
                            onClick={() => jumpToSection(item.id)}
                          >
                            <p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500">
                              {item.name}
                            </p>
                          </li>
                        </HashLink>
                      ))}
                      <li className="inline-block group relative">
                        <p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:group-hover:scale-110 group-hover:text-orange-500">
                          SGPT Products
                        </p>
                        <div className=" h-10 w-[140px] absolute top-3"></div>
                        <ul className="hidden group-hover:flex animate-show-list-language  absolute top-10 left-[-8px] flex-col gap-y-4 pt-2 bg-slate-800 w-[200px] min-h-[50px] rounded">
                          {menuSGPTProducts.map((item) => (
                            <HashLink
                              to="/healthcare#firstSection"
                              preventScrollReset={false}
                            >
                              <li
                                className="inline-block pl-2 "
                                key={item.path}
                              >
                                <p className="text-white text-md transition-all duration-150 cursor-pointer transform hover:text-orange-500">
                                  {item.name}
                                </p>
                              </li>
                            </HashLink>
                          ))}
                        </ul>
                      </li>
                      <div className="flex text-white items-center gap-x-2 cursor-pointer group relative">
                        <MdLanguage className="text-[24px]" />
                        <span className="group-hover:text-orange-400">
                          {currentLanguage}
                        </span>
                        <div className=" h-10 w-[140px] absolute top-3"></div>
                        <ul className="hidden group-hover:flex animate-show-list-language  absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded z-10">
                          {languages.map((lng, index) => (
                            <>
                              <li
                                key={lng + index}
                                className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show pl-2 mr-4 my-2"
                                onClick={() => changeLanguage(lng)}
                              >
                                {locales[lng as keyof typeof locales]}
                                <div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show  group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
                              </li>
                            </>
                          ))}
                        </ul>
                      </div>
                    </ul>
                    <div className="flex gap-4 z-20">
                      <Button size="sm" onClick={() => openLocalPdf()}>
                        <div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
                          <BsNewspaper />
                          Whitepaper
                        </div>
                      </Button>
                      <Button size="sm">
                        <div className="flex items-center gap-2 shadow-slate-50 transform motion-safe:hover:scale-110">
                          <BsGithub />
                          Audit
                        </div>
                      </Button>
                    </div>
                  </div>
                </>
              )
            }

            {
              // Mobile menu
              isMobile && isOpenMenu ? (
                <div className="fixed top-12 right-0 py-4  w-[200px] bg-gray-800 z-40 rounded-xl">
                  <div className="flex flex-col pl-[20px] h-full">
                    <ul className="flex flex-col gap-3 ">
                      {menuItems.map((item, index) => (
                        <HashLink to={`${item.path}#${item.id}`}>
                          <li
                            className="inline-block"
                            key={item.path}
                            onClick={() => jumpToSection(item.id)}
                          >
                            <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
                              {item.name}
                            </p>
                          </li>
                        </HashLink>
                      ))}
                      <li
                        className="inline-block"
                        onClick={() => (
                          openLocalPdf(), setIsOpenMenu(!isOpenMenu)
                        )}
                      >
                        <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
                          Whitepaper
                        </p>
                      </li>
                      <li
                        className="inline-block"
                        onClick={() => setIsOpenMenu(!isOpenMenu)}
                      >
                        <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
                          Audit
                        </p>
                      </li>
                      <div className="flex flex-col text-white gap-y-2 cursor-pointer group relative">
                        <div className="flex flex-row gap-x-1">
                          <span className="group-hover:text-orange-400">
                            SGPT Products
                          </span>
                        </div>
                        {/* <div className=" h-40 w-[140px]  absolute top-3"></div> */}
                        <ul className="hidden group-hover:flex animate-show-list-language flex-col gap-y-4   ">
                          {menuSGPTProducts.map((item, index) => (
                            <HashLink
                              to="/healthcare#firstSection"
                              preventScrollReset={false}
                            >
                              <li
                                className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
                                key={index}
                                onClick={() => setIsOpenMenu(!isOpenMenu)}
                              >
                                {item.name}
                                <div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show  group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
                              </li>
                            </HashLink>
                          ))}
                        </ul>
                      </div>
                      <div className="flex flex-col text-white gap-y-2 cursor-pointer group relative">
                        <div className="flex flex-row gap-x-1">
                          <MdLanguage className="text-[24px]" />
                          <span className="group-hover:text-orange-400">
                            {currentLanguage}
                          </span>
                        </div>
                        {/* <div className=" h-40 w-[140px]  absolute top-3"></div> */}
                        <ul className="hidden group-hover:flex animate-show-list-language flex-col gap-y-4   ">
                          {languages.map((lng, index) => (
                            <>
                              <li
                                className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
                                key={index}
                                onClick={() => changeLanguage(lng)}
                              >
                                {locales[lng as keyof typeof locales]}
                                <div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show  group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
                              </li>
                            </>
                          ))}
                        </ul>
                      </div>
                    </ul>
                  </div>
                </div>
              ) : null
            }
          </div>
        </div>
      ) : (
        <div className="fixed z-30 w-full p-5 transition-all duration-150">
          <div className="container mx-auto flex justify-between items-center xl:w-[90%]">
            <div className="flex gap-2 items-center">
              <div className="bg-white w-12 rounded-full overflow-hidden p-1">
                <img
                  src={robotLogo}
                  className="w-full transition-all duration-150 rounded-full"
                  alt=""
                />
              </div>
              <h4 className="text-3xl transition-all duration-150 text-white uppercase font-bold">
                SGPT
              </h4>
            </div>
            <div className="flex gap-6 items-center">
              <ul className="flex gap-6">
                {menuItems.map((item, index) => (
                  <HashLink
                    to={`${item.path}#${item.id}`}
                    key={item.path + index}
                  >
                    <li
                      className="inline-block "
                      onClick={() => jumpToSection(item.id)}
                    >
                      <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
                        {item.name}
                      </p>
                    </li>
                  </HashLink>
                ))}
                <li className="inline-block group relative">
                  <p className="text-white text-md transition-all duration-150 cursor-pointer transform group-hover:text-orange-400">
                    SGPT Products
                  </p>
                  <div className=" h-10 w-[140px]  absolute top-3"></div>
                  <ul className="hidden group-hover:flex animate-show-list-language  w-[250px] absolute top-10 flex-col gap-y-4 ">
                    {menuSGPTProducts.map((item) => (
                      <HashLink
                        to="/healthcare#firstSection"
                        preventScrollReset={false}
                      >
                        <li className="inline-block " key={item.path}>
                          <p className="text-white text-md transition-all duration-150 cursor-pointer transform  hover:text-orange-500">
                            {item.name}
                          </p>
                        </li>
                      </HashLink>
                    ))}
                  </ul>
                </li>
                <div className="flex text-white items-center gap-x-2 cursor-pointer group relative">
                  <MdLanguage className="text-[24px]" />
                  <span className="group-hover:text-orange-400">
                    {currentLanguage}
                  </span>
                  <div className=" h-9 w-[140px]  absolute top-3"></div>
                  <ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 lg:w-[120px] lg:pb-[12px] z-10 ">
                    {languages.map((lng, index) => (
                      <>
                        <li
                          key={index}
                          className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
                          onClick={() => changeLanguage(lng)}
                        >
                          {locales[lng as keyof typeof locales]}
                          <div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show  group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
                        </li>
                      </>
                    ))}
                  </ul>
                </div>
              </ul>
              <div className="flex gap-4">
                <Button size="sm" onClick={() => openLocalPdf()}>
                  <div className="flex items-center gap-2">
                    <BsNewspaper />
                    Whitepaper
                  </div>
                </Button>
                <Button size="sm">
                  <div className="flex items-center gap-2">
                    <BsGithub />
                    Audit
                  </div>
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Header;