/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { IExpertise } from "@/types/types";
import RoundedButton from "@/components/elements/RoundedButton";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import {
  PROJECT_TOGGLE_BTN,
  PROJECT_TOGGLE_ROW,
} from "@/lib/projectFormStyles";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

interface ExpertiseSelectorProps {
  expertiseList: IExpertise[] | null;
  expertise: string;
  setExpertise: (expertise: string) => void;
  subExpertise: string[];
  setSubExpertise: (subExpertise: string[]) => void;
  setFieldValue: (field: string, value: string | string[]) => void;
  formik: any;
}

const ExpertiseSelector = ({
  expertiseList,
  expertise,
  setExpertise,
  subExpertise,
  setSubExpertise,
  setFieldValue,
  formik,
}: ExpertiseSelectorProps) => {
  const { t } = useTranslation("common");

  const handleButtonPress = (nextExpertise: string) => {
    setExpertise(nextExpertise);
    setSubExpertise([]);
    setFieldValue("expertise", nextExpertise);
    setFieldValue("subExpertise", []);
  };

  const handleSubButtonPress = (sub_expertise: string) => {
    const updatedSubExpertise = subExpertise.includes(sub_expertise)
      ? subExpertise.filter((item) => item !== sub_expertise)
      : [...subExpertise, sub_expertise];
    setSubExpertise(updatedSubExpertise);
    setFieldValue("subExpertise", updatedSubExpertise);
  };

  useEffect(() => {
    setExpertise(formik?.values?.expertise || "");
    setSubExpertise(formik?.values?.subExpertise || []);
  }, [formik?.values?.expertise, formik?.values?.subExpertise, setExpertise, setSubExpertise]);

  const subList =
    expertiseList?.find((item) => item.expertise === expertise)?.sub_expertise ??
    [];

  return (
    <div className="mt-4 w-full">
      <p className="mb-2 text-center text-xs font-semibold text-neutral-500">
        {t("projects.newProject.mainExpertise")}
      </p>
      <div className={cn(PROJECT_TOGGLE_ROW, "mt-0 grid-cols-3")}>
        {expertiseList?.map((item) => (
          <RoundedButton
            key={item._id}
            className={cn(
              toggleBtnClass(expertise === item.expertise),
              PROJECT_TOGGLE_BTN,
              "max-w-none overflow-hidden"
            )}
            onClick={() => handleButtonPress(item.expertise)}
            type="button"
          >
            {item.expertise}
          </RoundedButton>
        ))}
      </div>

      {expertise && subList.length > 0 ? (
        <>
          <p className="mb-2 mt-4 text-center text-xs font-semibold text-neutral-500">
            {t("projects.newProject.subExpertise")}
          </p>
          <div className={cn(PROJECT_TOGGLE_ROW, "mt-0 grid-cols-3")}>
            {subList.map((item) => (
              <RoundedButton
                key={item._id}
                className={cn(
                  toggleBtnClass(subExpertise.includes(item.name)),
                  PROJECT_TOGGLE_BTN,
                  "max-w-none overflow-hidden"
                )}
                onClick={() => handleSubButtonPress(item.name)}
                type="button"
              >
                {item.name}
              </RoundedButton>
            ))}
          </div>
        </>
      ) : null}
    </div>
  );
};

export default ExpertiseSelector;
