import React, { useEffect, useState, Dispatch, SetStateAction } from "react";
import { useGetEmplymentTypes } from "../../utils/hooks/useGetEmplymentTypes";

interface JobTypeProps {
  setSortAndFilterOptions: Dispatch<SetStateAction<SortAndFilterOptionsType>>;
  sortAndFilterOptions: SortAndFilterOptionsType;
  setClearAllStateDisabled: Dispatch<SetStateAction<boolean>>;
}

const JobType: React.FC<JobTypeProps> = ({
  setSortAndFilterOptions,
  sortAndFilterOptions,
  setClearAllStateDisabled,
}) => {
  const [getEmploymentTypes, setEmploymentTypes] = useState<
    emplymentTypeSelect[]
  >([]);

  useEffect(() => {
    handleGetEmploymentTypes();
  }, []);

  const handleGetEmploymentTypes = async () => {
    const employmentTypesResp = (await useGetEmplymentTypes()) as SkillResponse;
    const newEmploymentTypes = employmentTypesResp.data.map(
      (employmentType) => ({
        value: employmentType.id,
        label: employmentType.name,
      })
    );
    setEmploymentTypes(newEmploymentTypes);
  };

  const handleJobTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    if (e.target.value !== "") {
      setClearAllStateDisabled(false);
    }
    setSortAndFilterOptions({
      ...sortAndFilterOptions,
      jobTypeKeyword: e.target.value,
    });
  };

  return (
    <>
      <select
        className="form-select"
        onChange={handleJobTypeChange}
        value={sortAndFilterOptions.jobTypeKeyword}
      >
        <option value="">Choose a Job Type</option>
        {getEmploymentTypes.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
      <span className="icon flaticon-briefcase"></span>
    </>
  );
};

export default JobType;