import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useTranslation } from "next-i18next";
import { useRouter } from "next/router";
import styles from "./OurPartners.module.scss";
import Link from "next/link";
import classNames from "classnames";

const OurPartners = ({ data, currentPage }: any) => {
  const { asPath } = useRouter();

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

  const [selectedNavItemId, setSelectedNavItemId] = useState("our-partners");

  const navigationItems = [
    {
      id: "our-partners",
      flex: 2,
      title: t("Our partners"),
      dataType: "our_partners",
    },
    {
      id: "our-business-partners",
      flex: 3,
      title: t("Our business partners"),
      dataType: "business_partners",
    },
    {
      id: "our-technology-partners",
      flex: 3,
      title: t("Our technology partners"),
      dataType: "technology_partners",
    },
  ];

  useEffect(() => {
    const hash = asPath.split("#")[1];

    if (hash) {
      setSelectedNavItemId(hash);
    }
  }, [asPath]);

  const selectedDataType =
    navigationItems.find((item) => item.id === selectedNavItemId)?.dataType || "our_partners";

  console.log("test", "data", data);

  return (
    <article id="our-partners" className={styles.ourPartners}>
      <div className="container">
        <div className="mb-12 flex">
          {navigationItems.map(({ id, flex, title }) => (
            <Link
              id={id}
              shallow
              href={`/${currentPage}#${id}`}
              key={id}
              className={`flex-${flex} lg:flex items-baseline ltr:mr-2 rtl:ml-2 pt-[3.375rem]`}
            >
              <h2
                className={classNames("title ltr:mr-4 rtl:ml-4 mb-7 max-sm:text-lg", {
                  "text-gradiant": id === selectedNavItemId,
                  "text-grey-2": id !== selectedNavItemId,
                })}
              >
                {t(title)}
              </h2>

              <hr className="flex-1 ltr:mr-2 rtl:ml-2 border-color-2" />
            </Link>
          ))}
        </div>

        <div className="flex flex-wrap justify-center">
          {data
            .filter((item: any) => item.key === selectedDataType)
            .map(({ icon_img, url }: any, index: number) => (
              <div key={index} className="basis-1/2 md:basis-1/6 p-2.5">
                <a href={url} target={url === "#" ? "_self" : "_blank"} rel="noreferrer">
                  <Image src={icon_img} alt="" width={334} height={223} quality={100} />
                </a>
              </div>
            ))}
        </div>
      </div>
    </article>
  );
};

export default OurPartners;