"use client";
import React from "react";
import { FaPlus } from "react-icons/fa";
import { useLocale, useTranslations } from "next-intl";
import axiosInstance from "@/utils/axiosClient";
import { useDispatch } from "react-redux";
import {
  getAddressById,
  CancelAddOrUpdateAddresses,
  DeleteAddress,
  ToggleDefaultAddress,
} from "@/store/address.slice";
import { AppDispatch } from "@/store/store";
import AddressCard from "@/shared/card/AddressCard";
import { clearLocation, setLocation } from "@/store/location.slice";
import { ScrollArea } from "@/shared/ui/scroll-area";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { Addresses, AuthStage } from "@/interfaces/types";
import showAlert from "@/shared/ShowAlert";

type Props = {
  addresses: Addresses[];
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
  setAuthStage: React.Dispatch<React.SetStateAction<AuthStage>>;
};

export default function CheckoutAddressesDetials({
  setAuthStage,
  addresses,
  setIsOpen,
}: Props) {
  const t = useTranslations("");
  const locale = useLocale();

  const dispatch = useDispatch<AppDispatch>();
  const EditItem = async (id: string) => {
    dispatch(getAddressById({ id })).then((res) => {
      if (res.payload) {
        setIsOpen(true);
        setAuthStage("location");
      }
    });
  };
  const deleteItemFromAddress = async (address: any) => {
    await axiosInstance
      .delete(`client/addresses/${address?.id}`)
      .then((res: any) => {
        ShowAlertMixin({
          icon: "success",
          title: res?.data?.message,
        });
        dispatch(DeleteAddress({ id: address?.id }));
        if (+address?.is_default == 1) dispatch(clearLocation());
      })
      .catch((error) => {
        const errorMessage = error?.message;
        ShowAlertMixin({
          icon: "error",
          title: errorMessage,
        });
      });
  };
  const deleteItem = (address: any) => {
    showAlert({
      t,
      title: t("Text.deleteAddress"),
      text: t("Text.deleteAddressDesc"),
      action: () => deleteItemFromAddress(address),
    });
  };
  const toggleItemToDefault = async (address: any) => {
    const id = address?.id;
    await axiosInstance
      .post(`client/addresses/${id}/toggle-default`)
      .then((res) => {
        ShowAlertMixin({
          icon: "success",
          title: res?.data?.message,
        });
        if (+address?.is_default == 1) {
          dispatch(clearLocation());
        } else {
          dispatch(
            setLocation({
              id: address?.id,
              is_default: true,
              phone_code: address?.contact?.phone_code,
              phone: address?.contact?.phone,
              country: address?.location?.country,
              city: address?.location?.city,
              district: address?.location?.district,
              lng: address?.location?.longitude,
              lat: address?.location?.latitude,
              description: address?.description,
              isLoading: false,
            }),
          );
        }
        dispatch(ToggleDefaultAddress({ id: id }));
      })
      .catch((error) => {
        const errorMessage = error?.message;
        ShowAlertMixin({
          icon: "error",
          title: errorMessage,
        });
      });
  };
  return (
    <div className="flex flex-col gap-0 pt-8 w-full md:p-4">
      <ScrollArea className="grow " dir={locale === "en" ? "ltr" : "rtl"}>
        <div className="relative h-[500px] flex flex-col pe-2">
          <div className="grid h-[425px] overflow-auto gap-2">
            {addresses.map((address, index: number) => {
              return (
                <div
                  key={index}
                  className="border border-primary-light bg-white p-4 rounded-2xl"
                >
                  <AddressCard
                    setDefault={() =>
                      !address?.is_default && toggleItemToDefault(address)
                    }
                    EditItem={() => EditItem(address?.id)}
                    deleteItem={() => deleteItem(address)}
                    address={address}
                  />
                </div>
              );
            })}
          </div>
          <div className="absolute bottom-0 start-1/2 translate-x-1/2 gap-6 my-5">
            <button
              onClick={() => {
                setIsOpen(true);
                setAuthStage("location");
                dispatch(CancelAddOrUpdateAddresses());
              }}
              className="text-center grid grid-cols-[auto_1fr] items-center gap-2 md:text-base text-sm  mx-auto px-7 py-3 bg-white border border-primary text-primary hover:bg-primary hover:text-white duration-300 cursor-pointer font-medium rounded-full "
            >
              <FaPlus size={25} />
              {t("BUTTONS.addNewAddress")}
            </button>
            {/* <button
              onClick={() => setIsOpen(false)}
              type="button"
              className="text-center md:text-base text-sm px-7 py-3 border border-primary bg-primary text-white hover:bg-white hover:text-primary  duration-300 cursor-pointer font-medium rounded-full "
            >
              {t("BUTTONS.save_address")}
            </button> */}
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}