"use client";

import { useEffect, useState } from "react";
import type { TypeCartRetentionBannerFields } from "./types";

import { Text } from "@shared/components/text";
import { Button } from "@shared/contentful/blocks/button";
import { Modal } from "@shared/contentful/blocks/modal";
import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
import { toDocument } from "@shared/utils/contentful/to-document";

const CartRetentionBanner: React.FC<{
  fields: TypeCartRetentionBannerFields;
  sys?: any;
  isInPopupContainer?: boolean;
  onClose?: () => void;
  onContinueCheckout?: () => void;
  checkShouldShowBanner?: () => boolean;
  onBannerShown?: () => void;
}> = ({
  fields,
  isInPopupContainer = false,
  onClose,
  onContinueCheckout,
  checkShouldShowBanner,
  onBannerShown,
}) => {
  const { anchorId, mainHeading, description, cta } = fields;

  const [modalOpen, setModalOpen] = useState<boolean>(false);

  useEffect(() => {
    const checkRetentionCookie = () => {
      if (checkShouldShowBanner?.() && !modalOpen) {
        setModalOpen(true);
        onBannerShown?.();
      }
    };
    checkRetentionCookie();
    const timeoutId = setTimeout(checkRetentionCookie, 100);
    return () => clearTimeout(timeoutId);
  }, []);

  const handleClose = () => {
    onClose?.();
    setModalOpen(false);
  };

  const continueCheckout = () => {
    onContinueCheckout?.();
  };

  if (isInPopupContainer) {
    return (
      <div
        className="pop-up-body mb-5 mt-10 w-full"
        data-section-type={"cart-retention-banner"}
        data-section-index={"0"}
      >
        <Text className="heading5 text-center lg:heading3">
          {mainHeading || "Welcome back. Let’s finish your order"}
        </Text>
        {description &&
          renderContentfulRichText(
            toDocument(description?.json),
            false,
            "body1 my-4 text-center"
          )}
        <div className="flex w-full justify-center">
          <Button
            onClick={continueCheckout}
            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
            disableAnimation={cta?.disableAnimation ?? true}
            animationType={cta?.animationType}
          />
        </div>
      </div>
    );
  }
  return (
    <section id={anchorId} data-testid="cart-retention-banner">
      <Modal
        size="sm"
        isOpen={modalOpen}
        onRequestClose={handleClose}
        bodyClassName="flex items-center justify-center"
        type="cart-retention-banner"
      >
        <div className="pop-up-body mb-5 mt-10 w-full">
          <Text className="heading5 text-center lg:heading3">
            {mainHeading || "Welcome back. Let&apos;s finish your order"}
          </Text>
          {description &&
            renderContentfulRichText(
              toDocument(description?.json),
              false,
              "body1 my-4 text-center"
            )}
          <div className="flex w-full justify-center">
            <Button
              onClick={continueCheckout}
              buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
              disableAnimation={cta?.disableAnimation ?? true}
              animationType={cta?.animationType}
            />
          </div>
        </div>
      </Modal>
    </section>
  );
};

export default CartRetentionBanner;