import React, { useContext, useEffect, useState } from "react";

import Image from "next/image";
import classNames from "classnames";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import useIsRtl from "../../particles/hooks/useIsRtl";
import AppContext from "../../particles/contexts/app-context";

import NavLinks from "../../../enums/NavLinks";
import styles from "./MegaMenu.module.scss";

import logo2 from "../../../public/icons/logo2.svg";

const MegaMenu = ({ menuId }: any) => {
  const isRtl = useIsRtl();

  const { t } = useTranslation("common");

  const data: any = useContext(AppContext);

  const [selectedItem, setSelectedItem] = useState<any | null>(null);

  useEffect(() => {
    setSelectedItem(null);
  }, [menuId]);

  return (
    <div className={styles.megaMenu}>
      <div className="container">
        <div className="mega__content">
          {menuId === NavLinks.AboutUs && (
            <div className="about-us-menu">
              <ul className="mega__links">
                <li className="hover:text-color-1 hover:font-bold mb-3">
                  <Link href="/our-partners#our-partners">{t("Our Partners")}</Link>
                </li>
                <li className="hover:text-color-1 hover:font-bold mb-3">
                  <Link href="/our-partners#our-business-partners">
                    {t("Our Business Partners")}
                  </Link>
                </li>
                <li className="hover:text-color-1 hover:font-bold mb-3">
                  <Link href="/our-partners#our-technology-partners">
                    {t("Our Technology Partner")}
                  </Link>
                </li>
              </ul>
            </div>
          )}

          {menuId === NavLinks.Industry && (
            <div className="industry-menu flex">
              <ul className="mega__links flex-1 pr-2">
                {data.services.map(({ id, name, url }: any, index: number) => (
                  <li
                    key={id}
                    className={classNames("hover:text-color-1 hover:font-bold", {
                      "mb-2.5": index + 1 < data.services.length,
                    })}
                    onMouseOver={() =>
                      setSelectedItem(data.services.find((service: any) => service.id === id))
                    }
                  >
                    {url && (
                      <a href={url} target="_blank" rel="noreferrer">
                        {name}
                      </a>
                    )}

                    {!url && (
                      <Link href={`/services/${id}`}>
                        {name} &nbsp; {isRtl ? <span>&#9666;</span> : <span>&#9656;</span>}
                      </Link>
                    )}
                  </li>
                ))}
              </ul>

              {selectedItem && (
                <ul className="mega__links flex-2">
                  {selectedItem?.subservices?.map(({ id, name }: any, index: number) => (
                    <li
                      key={id}
                      className={classNames({
                        "mb-2.5": index + 1 < selectedItem?.subservices?.length,
                      })}
                    >
                      {name}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          )}

          {menuId === NavLinks.Projects && (
            <div className="industry-menu flex">
              <ul className="mega__links flex-1 pr-2">
                {data.projects.map(({ id, name }: any, index: number) => (
                  <li
                    key={id}
                    className={classNames("hover:text-color-1 hover:font-bold", {
                      "mb-2.5": index + 1 < data.projects.length,
                    })}
                    onMouseOver={() =>
                      setSelectedItem(data.projects.find((project: any) => project.id === id))
                    }
                  >
                    <Link href={`/projects/${id}`}>
                      {name} &nbsp; {isRtl ? <span>&#9666;</span> : <span>&#9656;</span>}
                    </Link>
                  </li>
                ))}
              </ul>

              {selectedItem && (
                <div
                  className="mega__des flex-2"
                  dangerouslySetInnerHTML={{ __html: selectedItem?.short_desc }}
                ></div>
              )}
            </div>
          )}

          {selectedItem && (
            <div className="mega__image">
              <div className="wrapper relative">
                <Image
                  src={selectedItem?.cover_img || selectedItem?.img}
                  alt={selectedItem?.name}
                  fill
                />
              </div>
            </div>
          )}

          {!selectedItem && (
            <div className="mega__logo">
              <Image src={logo2} alt="" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MegaMenu;