"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 = {
  selectedPackages?: string[];
};

const PackagesDropdown: FC<Props> = ({ selectedPackages }) => {
  const { setValue } = useFormContext();

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

  const { data: packages } = useQuery({
    queryKey: ["internet-packages"],
    queryFn: () => getPackages(),
    retry: 0,
  });

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

  const defaultPackages = selectedPackages?.map((internetPackage: any) => ({
    value: internetPackage.id,
    label: internetPackage.name,
  }));

  const packageOption = packages?.map((internetPackage: any) => ({
    value: internetPackage.id,
    label: internetPackage.name,
  }));

  return (
    <>
      <Select
        className="w-full"
        onChange={handlePackagesChange}
        defaultValue={defaultPackages}
        options={packageOption}
        isMulti
      />
    </>
  );
};

export default PackagesDropdown;