"use client"
import getDestinations from "@/app/api-requests/getDestinations"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import { selectStyle } from "@/lib/utils"
import { Address_TP } from "@/modules/payment/address_TP"
import { AddressDetails } from "@/modules/payment/AddressForm"
import { useEffect } from "react"
import Select from "react-select"
type Props = {
  setAddressDetails: React.Dispatch<React.SetStateAction<AddressDetails>>
  valueToEdit: Address_TP["destination"] | undefined
}
const SelectDestination = ({ setAddressDetails, valueToEdit }: Props) => {
  const { data, isLoading } = getDestinations()
  const { lang } = useCurrentLanguage()

  return (
    <div className="flex flex-col gap-y-2">
      <label>
        <TranslateClient text="select_dest_place" />
      </label>
      <Select
        className="basic-single"
        classNamePrefix="select"
        placeholder={valueToEdit?.title?.[lang] || <TranslateClient text="select" />}
        isLoading={isLoading}
        isDisabled={isLoading}
        isSearchable={false}
        options={data}
        onChange={(option) => {
          setAddressDetails((prev) => ({ ...prev, destination_id: option?.id } as never))
        }}
        styles={selectStyle}
      />
    </div>
  )
}

export default SelectDestination