/* eslint-disable no-restricted-globals */
import { useCallback, useEffect } from "react";

import Container from "@/components/shared/container";
import CircleProgressBar from "@/components/ui/circle-progress-bar/circle-progress-bar";
import { usePayment } from "@/features/modules/hotel/payment/hooks/use-hotel-payment";
import { useLocale } from "@/hooks/useLocale";
import { storageManager } from "@/libs/storage-manager";

import { useCoreSummaryCtx } from "../context/core-summary-context";

interface CoreSummaryStepsProps {
  activeIndex: number;
  steps?: {
    label: string;
  }[];
  onStepChange?: (index: number) => void;
}

const CoreSummarySteps = (props: CoreSummaryStepsProps) => {
  // @todo - this businness logic should be removed. When implement your own logic, you can remove this comment.
  // const { strategy } = useApp();
  // if (strategy !== "payment-booking") return null;
  const { paymentState, setPaymentState } = usePayment();
  const { actions } = useCoreSummaryCtx();
  const { t } = useLocale();
  const STEPS = [
    {
      label: t("Room Selection"),
    },
    {
      label: t("Guest Information"),
    },
    {
      label: t("Payment"),
    },
  ];

  const onBackButtonEvent = useCallback(
    (e: PopStateEvent) => {
      const getCorePayment = storageManager.get("core-payment");
      if (getCorePayment?.payload?.paymentStatus === "payment") {
        e.preventDefault();
        storageManager.delete("core-payment");
        actions.clearCreditCardCampaigns();
        setPaymentState("idle");
        props.onStepChange?.(2);
      } else {
        // eslint-disable-next-line no-restricted-globals
        history.back();
      }
    },
    [paymentState?.payload?.paymentStatus],
  );

  useEffect(() => {
    window.history.pushState(null, "", window.location.pathname);
    window.addEventListener("popstate", onBackButtonEvent);

    return () => {
      window.removeEventListener("popstate", onBackButtonEvent);
    };
  }, [paymentState?.payload?.paymentStatus]);

  return (
    <div className="flex h-[76px] w-full flex-col items-center justify-center border-b border-gray-100 bg-white">
      <Container className="max-w-[360px]">
        <CircleProgressBar
          items={props?.steps ?? STEPS}
          activeIndex={props.activeIndex}
          itemOnClick={(clickedElementIndex) => {
            props.onStepChange?.(clickedElementIndex);
            if (clickedElementIndex === 0) {
              history.back();
              storageManager.delete("core-payment");
              actions.clearCreditCardCampaigns();
              setPaymentState("idle");
              window.scrollTo(0, 0);
            } else if (clickedElementIndex === 1) {
              storageManager.delete("core-payment");
              actions.clearCreditCardCampaigns();
              setPaymentState("idle");
              window.scrollTo(0, 0);
            } else {
              setPaymentState("payment");
            }
          }}
          className="my-8 cursor-pointer"
        />
      </Container>
    </div>
  );
};

export default CoreSummarySteps;