"use client";
import {
  HeaderEntity,
  HeaderEntityResponseCollection,
} from "@/generated/types";
import { GET_HEADERS_QUERY } from "@/graphql/documents/header.graphql";
import { useQuery } from "@apollo/client";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { useEffect, useState } from "react";
import styles from "./header.module.scss";
import { useTranslation } from "../../app/i18n";
import { TranslationFunction } from "../witness/type";
import Modal from "./modal";

type MenuProps = {
  language: string;
  isScrolled: boolean;
  scrollPosition: number;
  onDataReceived: (data: HeaderEntityResponseCollection) => void;
};

const Menu = (props: MenuProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentUrl, setCurrentUrl] = useState<string[]>([]);
  const [originUrl, setOriginUrl] = useState<string[]>([]);
  const [t, setT] = useState<TranslationFunction | null>(null);
  const [i18n, setI18n] = useState(null);
  const [isContactOpen, setIsContactOpen] = useState(false);
  const [bgColor, setBgColor] = useState('');

  const { language, isScrolled, scrollPosition, onDataReceived } = props;

  const toggleMenu = () => {
    setIsOpen(!isOpen)
    setBgColor(bgColor === "bg-blue-50" ? '' : "bg-blue-50");
  };

  const { loading, error, data } = useQuery(GET_HEADERS_QUERY, {
    variables: {
      locale: language,
    },
  });

  const verifyURLs = () => {
    const currentURL_ = window.location.href;
    const originUrl_ = window.location.origin + "/" + language;
    setCurrentUrl(currentURL_.split(","));
    setOriginUrl(originUrl_.split(","));
  };

  useEffect(() => {
    const interval = setInterval(verifyURLs, 100);
    return () => {
      clearInterval(interval);
    };
  }, [language]);

  useEffect(() => {
    if (data) {
      onDataReceived(data);
    }
  }, [data, onDataReceived]);

  useEffect(() => {
    const fetchData = async () => {
      const { t, i18n } = await useTranslation(language, "second-page");
      setT(() => t);
      setI18n(i18n);
    };
    fetchData();
  }, []);

  if (!t || !i18n) {
    return null;
  }

  return (
    <>
      <header>
        <nav
          className={`dark:bg-slate-900 fixed shadow-md top-0 left-0 right-0 z-50 w-full ${
            currentUrl[0] == originUrl[0]
              ? typeof window !== "undefined" &&
                scrollPosition >= window.innerHeight
                ? "bg-blue-50"
                : bgColor
              : "bg-blue-50"
          }`}
        >
          <div className="w-full flex items-center pl-3 sm:pl-8 pr-8 lg:pl-10  lg:pr-20 justify-between h-24">
            <div className="flex items-center">
              <div
                className={`flex-shrink-0 ${
                  isScrolled && currentUrl[0] == originUrl[0] ? "hidden" : ""
                }`}
              >
                <Link href="/" passHref>
                <div
                    className="mx-1.5 h-12 w-32 lg:h-16 lg:w-48 bg-center rounded-md"
                    style={{
                      backgroundImage: ` url(/assets/static/images/mainlogo.png)`,
                      backgroundSize: '100% 100%',
                    }}
                  ></div>
                </Link>
              </div>
            </div>
            <div className="hidden relative md:block mt-5">
              <div className="ml-10 md:flex  md:items-baseline space-x-4">
                {data &&
                  data.headers.data.length > 0 &&
                  data.headers.data.map((res: HeaderEntity, index: number) => {
                    const isLastIndex = index === data.headers.data.length - 1;
                    return (
                      <div className="flex items-center" key={index}>
                        <Link
                          href={res.attributes?.url || "/"}
                          passHref
                          className={` dark:text-white ${
                            styles.title
                          } px-4 py-1.5 my-0 font-bold justify-between rounded-3xl ${
                            currentUrl[0] == originUrl[0]
                              ? scrollPosition >= window.innerHeight
                                ? "font-bold border-transparent pb-1.5 text-black hover:transition-all hover:duration-1000 hover:border-2 hover:origin-left hover:border-blue-500 focus:border-2 focus:border-blue-500"
                                : "font-bold border-transparent pb-1.5 text-white hover:transition-all hover:duration-1000 hover:border-2 hover:origin-left hover:border-blue-500 focus:border-2 focus:border-blue-500"
                              : "font-bold border-transparent pb-1.5 text-black hover:transition-all hover:duration-1000 hover:border-2 hover:origin-left hover:border-blue-500 focus:border-2 focus:border-blue-500"
                          }`}
                        >
                          {res.attributes?.name?.toUpperCase()}
                        </Link>
                      </div>
                    );
                  })}
                <p
                  onClick={() => setIsContactOpen(true)}
                  className={`${styles.title} dark:bg-bg-gray-50 dark:text-white my-0 font-bold rounded-3xl cursor-pointer bg-blue-400 text-white hover:bg-gray-500 px-5 py-1.5 ml-3`}
                >
                  {t("contact_us.title")}
                </p>
              </div>
            </div>
            <div className="md:hidden flex flex-row z-50">
              <button
                onClick={toggleMenu}
                type="button"
                className="inline-flex items-center justify-center mr-5 p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded={isOpen ? "true" : "false"}
              >
                {isOpen ? (
                  <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
                ) : (
                  <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                )}
              </button>
            </div>
          </div>

          {isContactOpen ? (
            <Modal
              params={{
                language: language,
                isContactOpen: isContactOpen,
                setIsContactOpen: setIsContactOpen,
              }}
            />
          ) : null}

          <div className="-mr-2 flex md:hidden">
            {isOpen ? (
              <div
                id="mobile-menu"
                className={`md:hidden w-full absolute mx-auto ml-0 transition-300 sm:w-full ${
                  scrollPosition >= window.innerHeight
                    ? "bg-blue-50"
                    : "bg-blue-50"
                }`}
              >
                <ul className="transition-all w-full ease-in pl-5 pr-20 pt-2 pb-4 z-20">
                  {data &&
                    data.headers.data.length > 0 &&
                    data.headers.data.map(
                      (res: HeaderEntity, index: number) => {
                        const isLastIndex =
                          index === data.headers.data.length - 1;
                        return (
                          <li key={index}>
                            <Link
                              href={res.attributes?.url || "/"}
                              passHref
                              onClick={toggleMenu}
                              className={`${styles.title} block mb-1 text-md lg:text-xl pl-3 pr-5 font-semibold ${
                                scrollPosition >= window.innerHeight
                                  ? "border-b-2 border-transparent text-black hover:border-blue-500 hover:transition-all hover:duration-1000 origin-left mr-8 pt-4 md:pt-6"
                                  : "border-b-2 border-transparent text-gray-900 hover:border-blue-500 hover:transition-all hover:duration-1000 origin-left mr-8 pt-4 md:pt-6"
                              }`}
                            >
                              {res.attributes?.name?.toUpperCase()}
                            </Link>
                          </li>
                        );
                      }
                    )}
                </ul>
              </div>
            ) : null}
          </div>
        </nav>
      </header>
    </>
  );
};

export default Menu;