import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm, {
  TConfirmType,
} from "@/components/PaymentPage/methods/CheckoutForm";
import Modal from "@/components/Modal";
import { Stripe, StripeElementLocale } from "@stripe/stripe-js";
import { Dispatch, SetStateAction } from "react";
import styles from "./styles.module.scss";

import "./style.scss";
import { language } from "@/locales";

interface IPaymentCardModalProps {
  clientSecret?: string;
  stripePromise: Promise<Stripe | null> | null;
  paymentType?: TConfirmType;
  paymentIntentId?: string;
  returnUrl?: string;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
  removeNoScroll?: boolean;
}

export default function PaymentCardModal({
  clientSecret,
  stripePromise,
  paymentType,
  paymentIntentId,
  returnUrl,
  isOpen,
  setIsOpen,
  removeNoScroll,
}: IPaymentCardModalProps) {
  return (
    <Modal
      open={isOpen}
      onClose={() => setIsOpen(false)}
      removeNoScroll={removeNoScroll}
      containerClassName={styles["modal-container"]}
    >
      <Elements
        stripe={stripePromise}
        options={{
          clientSecret,
          locale: language as StripeElementLocale | undefined,
        }}
      >
        <CheckoutForm
          confirmType={paymentType}
          subscriptionReceiptId={paymentIntentId}
          returnUrl={returnUrl}
        />
      </Elements>
    </Modal>
  );
}