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

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

const WorkMode: React.FC<WorkModeProps> = ({
  setSortAndFilterOptions,
  sortAndFilterOptions,
  setClearAllStateDisabled,
}) => {
  const [getWorkModes, setWorkModes] = useState<workModeSelect[]>([]);

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

  const handleGetWorkModes = async () => {
    const workModesResp = (await useGetWorkModeTypes()) as SkillResponse;
    const newWorkModes = workModesResp.data.map((workMode) => ({
      value: workMode.id,
      label: workMode.name,
    }));
    setWorkModes(newWorkModes);
  };

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

  return (
    <>
      <select
        className="form-select"
        onChange={handleWorkModeChange}
        value={sortAndFilterOptions.workModeKeyword}
      >
        <option value="">Choose a Work Mode</option>
        {getWorkModes.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
      <span className="icon flaticon-briefcase"></span>
    </>
  );
};

export default WorkMode;