/* eslint-disable @typescript-eslint/no-explicit-any */
import { IExpertise } from "@/types/types";
import RoundedButton from "@/components/elements/RoundedButton";
import { useEffect } from "react";

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 handleButtonPress = (expertise: string) => {
    setExpertise(expertise);
    setSubExpertise([]);
    setFieldValue("expertise", expertise);
    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]);
  console.log(formik?.values);

  return (
    <div className="grid grid-cols-3 gap-2 mt-4">
      {expertiseList?.map((item) => (
        <RoundedButton
          key={item._id}
          className={`p-1 min-w-24 rounded-3xl overflow-hidden ${
            expertise === item.expertise
              ? "bg-yellow-500 text-white border-yellow-500"
              : "border-gray-400"
          }`}
          onClick={() => handleButtonPress(item.expertise)}
          type="button"
        >
          {item.expertise}
        </RoundedButton>
      ))}

      {expertiseList
        ?.find((item) => item.expertise === expertise)
        ?.sub_expertise.map((item) => (
          <RoundedButton
            key={item._id}
            className={`p-1 min-w-24 rounded-3xl overflow-hidden ${
              subExpertise.includes(item.name)
                ? "bg-pink-500 text-white border-pink-500"
                : "bg-white text-black border-gray-400"
            }`}
            onClick={() => {
              handleSubButtonPress(item.name);
            }}
            type="button"
          >
            {item.name}
          </RoundedButton>
        ))}
    </div>
  );
};

export default ExpertiseSelector;
