"use client";
import { ComponentSharedTagsDev, ProjectWedig, Tags } from "@/generated/types";
import Link from "next/link";
import { useEffect, useState } from "react";
import { useTranslation } from "../../app/i18n";
import styles from "./achievement.module.scss";
import Pagination from "./pagination";

type AchievementProps = {
  lng: string;
  project: ProjectWedig[];
};

type InfoProject = {
  title: string;
  subDescriptions: string;
  id: string;
};

type RootLayoutProps = {
  params: AchievementProps;
};

type TranslationFunction = (key: string) => string;

export default function Achievements({
  params: { lng, project },
}: RootLayoutProps) {
  const [t, setT] = useState<TranslationFunction | null>(null);
  const [i18n, setI18n] = useState(null);
  const [offset, setOffset] = useState(0);
  const [data, setData] = useState<ProjectWedig[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [recordsPerPage] = useState(4);
  const [description, setDescription] = useState("");
  const [title, setTitle] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);
  const [tags, setTags] = useState<Tags[]>([]);

  const indexOfLastRecord = currentPage * recordsPerPage;
  const indexOfFirstRecord = indexOfLastRecord - recordsPerPage;
  const currentRecords = data.slice(indexOfFirstRecord, indexOfLastRecord);
  const nPages = Math.ceil(data.length / recordsPerPage);

  useEffect(() => {
    const fetchData = async () => {
      const { t, i18n } = await useTranslation(lng, "second-page");
      setT(() => t);
      setI18n(i18n);
      setData(project);
      setDescription(project[0]?.subDescriptions);
      setTitle(project[0]?.title);
      setTags(project[0]?.tags)
    };

    fetchData();
  }, [lng]);

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

  function addDescription(title: string, subDescriptions: string, tags: any) {
    setDescription(subDescriptions);
    setTitle(title);
    setTags(tags);
  }

  return (
    <div className="my-36 grid w-full">
      <div className="mb-2 ml-8 md:ml-12">
        <div className="ml-0.5 w-4 h-1 font-arial bg-white"></div>
        <div className="flex md:grid">
          <h1
            className={`${styles.title_achievement} font-bold text-2xl text-white sm:mr-0`}
          >
            {t("achievements.title_one")}
          </h1>
          <h1 className="text-blue-400 md:mb-2 top-0 font-bold text-xl md:text-2xl lg:text-3xl md:leading-9 font-sans">
            {"  "} {t("achievements.title_two")}
          </h1>
        </div>
      </div>
      <div className="flex w-full justify-between">
        <div className="w-1/3">
          <div className="ml-4 md:ml-12 mr-1">
            <h3 className="font-bold text-2xl text-white">
              {title?.toUpperCase()}
            </h3>
            <div className="shadow-md">
              <div className="flex mb-1">
                {tags &&
                  tags?.map((tag, index) => {
                    const lastIndex = tags.length - 1;
                    return (
                      <h1
                        key={`${index}${tag?.name}`}
                        className={`${styles.description_project} mr-2`}
                      >
                        {tag?.name?.toUpperCase()}
                        {index !== lastIndex && " / "}
                      </h1>
                    );
                  })}
              </div>
              <p
                className={`${styles.description_project} mb-5 max-h-96 overflow-y-hidden font-amiri py-2`}
              >
                {description}
              </p>
            </div>
            <div className="mt-10">
              <Link href={`${currentRecords[activeIndex]?.slugUrl}`}>
                <p
                  className={`${styles.button_style} px-2 w-40 text-center rounded-full text-white font-bold text-sm py-1.5 border-2 hover:bg-gray-400 border-blue-400 cursor-pointer`}
                >
                  {t("project")}
                </p>
              </Link>
            </div>
          </div>
        </div>
        <div className="w-2/3">
          <div className="grid items-center">
            <div className="hidden md:flex md:flex-row mx-3 md:justify-between lg:justify-center lg:ml-3 my-3">
              {currentRecords &&
                currentRecords.length > 0 &&
                currentRecords.map(
                  (Achievement: ProjectWedig, index: number) => {
                    return (
                      <Link
                        href={`${Achievement.slugUrl}`}
                        key={index}
                        tabIndex={0}
                        className={`${styles.items_project} ${
                          styles.project_big_screen
                        } mx-2 h-64 md:h-80 bg-cover hover:border-2 hover:border-blue-500 hover:translate-x-2 cursor-pointer bg-center rounded-lg ${
                          activeIndex === index
                            ? "border-2 border-blue-500"
                            : ""
                        }`}
                        onMouseEnter={() => {
                          setActiveIndex(index);
                          addDescription(
                            Achievement.title,
                            Achievement.subDescriptions,
                            Achievement.tags
                          );
                        }}
                        style={{
                          backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.858)), url(${Achievement.image?.url})`,
                        }}
                      >
                        <div className="pt-40 mt-5 px-1.5 grid">
                          <div className="ml-0.5 w-8 rounded-full h-1 font-arial bg-white"></div>
                          <div
                            className={`${styles.tags} text-white mt-1.5 mb-1`}
                          >
                            {Achievement.tags[0]?.name.toUpperCase()}
                          </div>
                          <div className="text-xl font-bold text-white mt-1.5">
                            <p className={styles.title_project}>
                              {Achievement?.title.toUpperCase()}
                            </p>
                          </div>
                        </div>
                      </Link>
                    );
                  }
                )}
            </div>
            <div className="mr-20 justify-center md:hidden">
              <ul className="my-4">
                {currentRecords &&
                  currentRecords.length > 0 &&
                  currentRecords.map(
                    (Achievement: ProjectWedig, index: number) => {
                      return (
                        <li
                          key={index}
                          className="bg-gray-300 px-5 py-3 my-4 hover:bg-blue-300 cursor-pointer shadow-lg rounded-md"
                          onMouseEnter={() =>
                            addDescription(
                              Achievement.title,
                              Achievement.subDescriptions,
                              Achievement.tags
                            )
                          }
                        >
                          <Link href={`${Achievement.slugUrl}`}>
                            <span
                              className={`${styles.tags} text-white mt-1.5 mb-2`}
                            >
                              {Achievement?.tags[0].name.toUpperCase()}
                            </span>
                            <br />
                            <span className="text-xl font-bold text-white">
                              {Achievement?.title.toUpperCase()}
                            </span>
                          </Link>
                        </li>
                      );
                    }
                  )}
              </ul>
            </div>
            <div className="flex mt-2 text-center justify-center items-center">
              <Pagination
                nPages={nPages}
                currentPage={currentPage}
                setCurrentPage={setCurrentPage}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}