"use client"
import getCities from "@/app/api-requests/getCities"
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 Select from "react-select"
type Props = {
  setAddressDetails: React.Dispatch<React.SetStateAction<AddressDetails>>
  valueToEdit: Address_TP["city"] | undefined
}
const SelectCity = ({ setAddressDetails, valueToEdit }: Props) => {
  const { data, isLoading } = getCities()
  const { lang } = useCurrentLanguage()
  return (
    <div className="flex flex-col gap-y-2">
      <label>
        <TranslateClient text="city" />
      </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, city_id: option?.id } as never)
          )
        }}
        styles={selectStyle}
      />
    </div>
  )
}

export default SelectCity