"use client"
import { Label } from "@/components/ui/label"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import Modal from "@/components/ui/Modal"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import { images } from "@/lib/images"
import { Address_TP } from "@/modules/payment/address_TP"
import Image from "next/image"
import AddAddress from "./AddAddress"
type Props = {
  setOpenAddressModal: React.Dispatch<React.SetStateAction<boolean>>
  openAddressModal: boolean
  addressToEdit: Address_TP | null
  handelAddressChange: (address: Address_TP) => void
  setAddressToEdit: React.Dispatch<React.SetStateAction<Address_TP | null>>
  addressData?: Address_TP[] | null
}
const AddressList = ({
  openAddressModal,
  setOpenAddressModal,
  addressToEdit,
  setAddressToEdit,
  handelAddressChange,
  addressData,
}: Props) => {
  const { lang } = useCurrentLanguage()
  function editAddressHandler(address: Address_TP) {
    setAddressToEdit(address)
    setOpenAddressModal(true)
  }

  return (
    <>
      {!addressData?.length ? (
        <>
          <div className="text-center mb-10 text-red-500">
            <TranslateClient text="please_add_address" />
          </div>
          {/* <RadioGroup defaultValue="add_address">
                        <Label
                            htmlFor="add_address"
                            className="flex items-center justify-between border border-mainBlue rounded-xl py-4 px-4"
                        >
                            <RadioGroupItem value="add_address" id="add_address" className="text-mainBlue" />
                            <span>
                                <TranslateClient text="please_add_address" />
                            </span>
                        </Label>
                    </RadioGroup> */}
        </>
      ) : (
        <RadioGroup
          onValueChange={(value) => {
            handelAddressChange(value)
          }}
        >
          {addressData?.map((address) => (
            <div
              key={address?.id}
              dir={lang === "ar" ? "rtl" : "ltr"}
              className="border border-mainBlue rounded-xl py-4 px-4 flex flex-col space-y-3 relative mb-4"
            >
              <Label className="flex items-center justify-between cursor-pointer" htmlFor={address?.address}>
                <div className="flex items-center gap-x-2">
                  <Image src={images.locationCart} alt="edit" width={40} />
                  <span className="font-bold">
                    <TranslateClient text={address?.address} />
                  </span>
                </div>
                <RadioGroupItem value={address} id={address?.address} className="text-mainBlue" />
              </Label>
              <p className="font-[500]">
                <TranslateClient text={address?.city?.title?.[lang]} />
              </p>
              <p className="text-textGray-100">
                <TranslateClient text={address?.destination?.title?.[lang]} />
              </p>
              <button
                onClick={() => editAddressHandler(address)}
                className={`absolute bottom-2 ${lang === "ar" ? "left-3" : "right-3"}`}
              >
                <Image src={images.edit} alt="edit" width={20} />
              </button>
            </div>
          ))}
        </RadioGroup>
      )}
      <Modal open={openAddressModal} setOpen={setOpenAddressModal}>
        <AddAddress setOpenAddressModal={setOpenAddressModal} addressToEdit={addressToEdit} />
      </Modal>
    </>
  )
}

export default AddressList