"use client";
import { useEffect, useState } from "react";
import CheckoutDetails from "./CheckoutDetails";
import CheckoutSummary from "./CheckoutSummary";
import EmptyCart from "../cart/EmptyCart";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store/store";
import { useLocale, useTranslations } from "next-intl";
import { AuthStage, CheckoutFormValues } from "@/interfaces/types";
import AppModal from "@/shared/Modal/AppModal";
import CheckoutAddressesDetials from "./CheckoutAddressesDetials";
import LocationForm from "../appforms/LocationForm";
import UseSession from "@/hooks/UseSession";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Form } from "@/shared/ui/form";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { UseMutate } from "@/hooks/UseMutate";
import Swal from "sweetalert2";
import { useRouter } from "nextjs-toploader/app";
import { AppDispatch } from "@/store/store";
import { clearCart } from "@/store/cart.slice";
import Success from "@/assets/images/success.gif";
import Failed from "@/assets/images/failed.gif";
import LoaderWrapper from "@/shared/Loader/LoaderWrapper";
export default function CheckoutCopmonent() {
  const t = useTranslations();
  const [isOpen, setIsOpen] = useState(false);
  const [authStage, setAuthStage] = useState<AuthStage>("locationData");
  const session = UseSession();
  const router = useRouter();
  const locale = useLocale();
  const dispatch = useDispatch<AppDispatch>();

  const { id } = useSelector((state: RootState) => state.locationConfig);
  const { allAddressesItems, mainLoader: addressMainLoader } = useSelector(
    (state: RootState) => state.AddressConfig,
  );

  const [locationId, setLocationId] = useState<any>(id);
  useEffect(() => {
    setLocationId(id);
  }, [id]);
  const { subTotal, totalPrice, items, mainLoader, shipping_price } =
    useSelector((state: RootState) => state.CartConfig);

  const formSchema = yup.object({
    date: yup
      .string()
      .required(t("validations.requiredField", { field: t("LABELS.date") })),
    shipping_time: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.shipping_time") }),
      ),
    notes: yup
      .string()
      .required(t("validations.requiredField", { field: t("LABELS.notes") })),
    occasion: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.occasion") }),
      ),
    card_number: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.card_number") }),
      ),
    card_name: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.card_name") }),
      ),
    expiry_date: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.expiry_date") }),
      ),
    cvv: yup
      .string()
      .required(t("validations.requiredField", { field: t("LABELS.cvv") })),
  });

  const form = useForm<CheckoutFormValues>({
    resolver: yupResolver(formSchema),
    defaultValues: {
      date: "",
      shipping_time: "",
      notes: "",
      occasion: "",
      card_number: "",
      card_name: "",
      expiry_date: "",
      cvv: "",
    },
  });
  const { mutate, isLoading: isLoadingOrder } = UseMutate({
    endpoint: "client/orders/checkout",
    onSuccess: async (responseData: any) => {
      Swal.fire({
        title: responseData?.message,
        imageUrl: `${Success.src}`,
        showConfirmButton: false,
        allowOutsideClick: false,
        allowEscapeKey: false,
        allowEnterKey: false,
        footer: `<p id="swal2-footer"> ${t("Text.goToMyOrders")}</p>`,
        customClass: {
          popup: "custom-popup-className",
          title: "custom-title-className",
          footer: "custom-footer-className",
        },
        padding: "1rem",
        didOpen: () => {
          const footerLink = document.getElementById("swal2-footer");
          if (footerLink) {
            footerLink.addEventListener("click", () => {
              Swal.close();
              router.replace(`${locale == "ar" ? "" : "/en"}/profile/orders`);
              dispatch(clearCart());
            });
          }
        },
      });
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    if (session) {
      const finalOut = {
        address_id: locationId,
        date: values.date,
        shipping_time_id: values.shipping_time,
        notes: values.notes,
        occasion: values.occasion,
        card_number: values.card_number,
        card_name: values.card_name,
        expiry_date: values.expiry_date,
        cvv: values.cvv,
      };
      if (!finalOut.address_id) {
        ShowAlertMixin({
          icon: "error",
          title: t("validations.requiredField", {
            field: t("LABELS.location"),
          }),
        });
        return;
      }

      mutate({ ...finalOut });
    } else {
      Swal.fire({
        showConfirmButton: false,
        title: t("session_expired_to_complete_order"),
        imageUrl: `${Failed.src}`,
        imageHeight: "100px",
        imageWidth: "100px",
        footer: `<a href="${
          locale == "ar" ? "" : "/en"
        }/auth/login" id="swal2-footer"> ${t("NAV.login")}</a>`,
        customClass: {
          popup: "custom-popup-class",
          title: "custom-title-class",
          footer: "custom-footer-class",
        },
        padding: "1rem",
        didOpen: () => {
          const footerLink = document.getElementById("swal2-footer");
          if (footerLink) {
            footerLink.addEventListener("click", () => {
              Swal.close();
              router.replace(`${locale == "ar" ? "" : "/en"}/auth/login`);
            });
          }
        },
      });
    }
  }
  if (mainLoader || (addressMainLoader && session)) {
    return <LoaderWrapper />;
  }
  return (
    <div className="mt-4">
      {items?.length > 0 ? (
        <>
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className=" py-4 grid lg:grid-cols-[2.5fr_1fr] gap-4"
            >
              <CheckoutDetails
                setLocationId={setLocationId}
                locations={allAddressesItems}
                setAuthStage={setAuthStage}
                setIsOpen={setIsOpen}
              />
              <CheckoutSummary
                items={items}
                subTotal={subTotal}
                totalPrice={totalPrice}
                isLoading={session ? addressMainLoader : false}
                isLoadingOrder={isLoadingOrder}
                shipping_price={shipping_price}
              />
            </form>
          </Form>
          <AppModal
            centered
            isModalVisible={isOpen}
            onCancel={() => setIsOpen(false)}
            getContainer={"html"}
            className={
              authStage == "location" ? "location-Modal" : "locationData-Modal"
            }
          >
            {authStage == "location" && (
              <LocationForm
                setAuthStage={setAuthStage}
                dialogOpen={setIsOpen}
                setLocationId={setLocationId}
              />
            )}
            {authStage == "locationData" && (
              <CheckoutAddressesDetials
                addresses={allAddressesItems}
                setIsOpen={setIsOpen}
                setAuthStage={setAuthStage}
              />
            )}
          </AppModal>
        </>
      ) : (
        <EmptyCart />
      )}
    </div>
  );
}