"use client"
import addAddress from "@/app/api-requests/addAddress"
import deleteAddress from "@/app/api-requests/deleteAddress"
import { InputComp } from "@/components/ui/inputComp"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import MainButton from "@/components/ui/MainButton"
import { toast } from "@/components/ui/use-toast"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import { Address_TP } from "@/modules/payment/address_TP"
import { AddressDetails } from "@/modules/payment/AddressForm"
import { useEffect, useState } from "react"
import LogoTitle from "../login-signup/LogoTitle"
import SelectCity from "./SelectCity"
import SelectDestination from "./SelectDestination"
type Props = {
  setOpenAddressModal: React.Dispatch<React.SetStateAction<boolean>>
  addressToEdit: Address_TP | null
}
const defaultValues = {
  address: "",
  city_id: null,
  destination_id: null,
}

const AddAddress = ({ setOpenAddressModal, addressToEdit }: Props) => {
  const { locale } = useCurrentLanguage()

  const [addressDetails, setAddressDetails] =
    useState<AddressDetails>(defaultValues)

  const { data, isLoading, mutate, addAddressState } = addAddress()
  const {
    isLoading: deleting,
    mutate: doDeleteAddress,
    data: deleteData,
    deleteAddressState,
  } = deleteAddress()

  //? re get addresses  after add or delete one
  useEffect(() => {
    const hasErrors = deleteData?.errors || data?.errors
    const isSuccess =
      (data && !data?.errors) || (deleteData && !deleteData?.errors)

    if (hasErrors) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Something went wrong. Try again later.",
        className: "bg-red-700 text-white rounded-xl",
      })
    }

    if (isSuccess) {
      setOpenAddressModal(false)
    }
  }, [addAddressState, deleteAddressState])
  // set address details in case of edit
  useEffect(() => {
    if (addressToEdit) {
      const comingAddress = {
        city_id: addressToEdit?.city?.id,
        destination_id: addressToEdit?.destination?.id,
        address: addressToEdit?.address,
        id: addressToEdit?.id,
      }
      setAddressDetails(comingAddress)
    }
  }, [addressToEdit])

  function submitHandler(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const isAllFieldsFilled = Object.values(addressDetails).every(
      (val) => !!val
    )
    if (!isAllFieldsFilled && !addressToEdit) {
      toast({
        variant: "destructive",
        title: locale?.["missing_data"],
        description: locale?.["fill_all_fields"],
        className: "bg-red-700 text-white rounded-xl",
      })
      return
    }
    mutate(
      !addressToEdit ? addressDetails : { ...addressDetails, _method: "patch" }
    )
  }
  function deleteAddressHandler() {
    doDeleteAddress(addressToEdit?.id)
  }

  return (
    <div className="py-6">
      <LogoTitle title={!addressToEdit ? "add_new_address" : "edit_address"} />
      <form onSubmit={submitHandler} className="flex flex-col gap-y-6">
        <SelectDestination
          setAddressDetails={setAddressDetails}
          valueToEdit={addressToEdit?.destination}
        />
        <SelectCity
          setAddressDetails={setAddressDetails}
          valueToEdit={addressToEdit?.city}
        />
        <div>
          <label htmlFor="address">
            <TranslateClient text="address" />
          </label>
          <InputComp
          // className="bg-white border border-gray-300 !rounded-[5px]"
          className="bg-white border border-gray-300"
            id="address"
            placeholder={locale?.address}
            value={addressDetails["address"]}
            onChange={(e) =>
              setAddressDetails((prev) => ({
                ...prev,
                address: e.target.value,
              }))
            }
          />
        </div>
        <MainButton
          type="submit"
          intent={isLoading ? "loading" : "primary"}
          disabled={isLoading}
          size="base"
          fullWidth
        >
          <TranslateClient text={!addressToEdit ? "add" : "update"} />
        </MainButton>
        <MainButton
          type="button"
          onClick={deleteAddressHandler}
          className={`bg-red-600 ${addressToEdit ? "inline-block" : "hidden"}`}
          intent={deleting ? "loading" : "primary"}
          disabled={deleting}
          size="base"
          fullWidth
        >
          <TranslateClient text="delete" />
        </MainButton>
      </form>
    </div>
  )
}

export default AddAddress