"use client";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC } from "react";
import { useFormContext } from "react-hook-form";
import Select from "react-select";

type Props = {
  selectedEmployee?: string[];
};

const EmployeeDropdown: FC<Props> = ({ selectedEmployee }) => {
  const { setValue } = useFormContext();

  const getEmployee = async () => {
    const { data } = await axios.get(`/api/employees`);
    return data?.data;
  };

  const { data: employees } = useQuery({
    queryKey: ["employee"],
    queryFn: () => getEmployee(),
    retry: 0,
  });

  const handleEmployeeChange = (selectedOption: any) => {
    const option = selectedOption?.map((item: any) => Object.values(item)[0]);
    setValue("employee_id", option);
  };

  const defaultEmployee = selectedEmployee?.map((employee: any) => ({
    value: employee.id,
    label: employee.name,
  }));

  const employeeOption = employees?.map((employee: any) => ({
    value: employee.id,
    label: employee.name,
  }));

  return (
    <>
      <Select
        className="w-full"
        onChange={handleEmployeeChange}
        defaultValue={defaultEmployee}
        options={employeeOption}
        isMulti
      />
    </>
  );
};

export default EmployeeDropdown;