"use client";

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC, useEffect, useId } from "react";
import { useFormContext } from "react-hook-form";
import Select from "react-select";
import "./style.css";

type Props = {
  defaultItems?: any;
  name: string;
  idName: string;
  getLabel: (x: any) => void;
  isMulti?: boolean;
  onChange?: (x: any) => void;
  isEnabled?: boolean;
  depend_on?: string | number | undefined;
  value?: "value" | "label";
};

const DropdownList: FC<Props> = ({
  defaultItems,
  name,
  idName,
  getLabel,
  isMulti = true,
  onChange = () => {},
  isEnabled = true,
  depend_on = undefined,
  value = "value",
}) => {
  const {
    setValue,
    formState: { errors },
    clearErrors,
  } = useFormContext();
  const id = useId();
  const getDropdownList = async () => {
    if (name === "status") {
      return await new Promise((resolve) => {
        resolve([
          { id: 1, name: "Active" },
          { id: 0, name: "Inactive" },
        ]);
      });
    }
    let url = `/api/dropdown?item=${name}s`;
    if (depend_on) {
      url = `${url}&id=${depend_on}`;
    }
    const { data } = await axios.get(url);
    return data?.data;
  };
  const {
    data: dropdownList,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: [`${name}-dropdown`],
    queryFn: () => getDropdownList(),
    retry: 0,
    enabled: isEnabled,
  });
  useEffect(() => {
    if (depend_on) {
      refetch();
    }
  }, [depend_on]);

  const handleChange = (selectedOption: any) => {
    if (!isMulti) {
      setValue(idName, selectedOption?.[value]);
      onChange(selectedOption);
    }
    if (isMulti) {
      const option = selectedOption?.map((item: any) => Object.values(item)[0]);
      setValue(idName, option);
      onChange(option);
    }
    clearErrors(idName);
  };

  const defaultOptions = () => {
    if (!defaultItems && !isMulti) {
      return {
        value: 0,
        label: `${name}`,
      };
    }
    if (defaultItems?.id) {
      //  setValue(idName, defaultItems.id);
      return { value: defaultItems.id, label: getLabel(defaultItems) };
    }
    return defaultItems?.map((item: any) => ({
      value: item.id,
      label: getLabel(item),
    }));
  };
  useEffect(() => {
    if (defaultItems?.id) {
      setValue(idName, defaultItems.id);
    }
  }, [defaultItems]);

  const options = dropdownList?.map((item: any) => ({
    value: item.id,
    label: getLabel(item),
  }));

  const customStyles = {
    control: (base: any) => ({
      ...base,
      minHeight: 42,
      background: "rgb(249 250 251)",
      borderRadius: "8px",
    }),
  };
  return (
    <>
      <Select
        instanceId={id}
        className="w-full"
        onChange={handleChange}
        defaultValue={defaultOptions}
        options={options}
        isMulti={isMulti}
        isClearable={true}
        isLoading={isLoading}
        isSearchable
        classNamePrefix="react-select"
        styles={customStyles}
      />
      {errors?.[idName] && (
        <span className="text-red-500">{name} is required</span>
      )}
    </>
  );
};

export default DropdownList;