import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.scss";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Loader from "@/components/Loader";
import Title from "@/components/Title";
import CheckoutForm from "../CheckoutForm";
import PaymentMethodsChoice from "../../PaymentMethodsChoice";
import { EPaymentMethod } from "@/data/paymentMethods";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

const getPrice = (product: IFunnelPaymentVariant | null) => {
  if (!product) {
    return 0;
  }
  return (product.trialPrice || 0) / 100;
};

interface IPaymentFormProps {
  isSinglePayment?: boolean;
  className?: string;
  funnel: ELocalesPlacement;
  paymentPlacement: string;
  trialInterval: number;
  onPaymentError?: (error?: string | null) => void;
  onPaymentSuccess?: () => void;
  onModalClosed?: () => void;
}

function PaymentForm({
  isSinglePayment = false,
  className,
  funnel,
  paymentPlacement,
  trialInterval,
  onPaymentError,
  onPaymentSuccess,
  onModalClosed,
}: IPaymentFormProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const currency = useSelector(selectors.selectCurrency);
  const activeProduct = useSelector(selectors.selectActiveProduct);

  const isLoading = false;

  const paymentMethodsButtons = [
    {
      id: EPaymentMethod.CREDIT_CARD,
      icon: "/payment-form/credit-card.svg",
      title: translate("payment_modal.credit_card"),
    },
  ];

  return (
    <>
      {isLoading && (
        <div className={styles["payment-modal"]}>
          <div className={styles["payment-loader"]}>
            <Loader />
          </div>
        </div>
      )}
      <div
        className={`${styles["payment-modal"]} ${
          isLoading ? styles.hide : ""
        } ${className}`}
      >
        {!isSinglePayment && (
          <Title variant="h3" className={styles.title}>
            {translate("payment_modal.title")}
          </Title>
        )}
        <PaymentMethodsChoice
          paymentMethods={paymentMethodsButtons}
          selectedPaymentMethod={paymentMethodsButtons[0].id}
          onSelectPaymentMethod={() => {}}
        />
        {!isSinglePayment && activeProduct && (
          <div>
            <p className={styles["sub-plan-description"]}>
              {translate("payment_modal.description", {
                priceForDays: (
                  <b>
                    {translate("payment_modal.price_for_days", {
                      trialPrice: addCurrency(
                        getPrice(activeProduct),
                        currency
                      ),
                      trialDuration: trialInterval,
                    })}
                  </b>
                ),
                emailReminder: (
                  <b>{translate("payment_modal.email_reminder")}</b>
                ),
              })}
            </p>
          </div>
        )}
        <div className={styles["payment-method-container"]}>
          {!!activeProduct && (
            <CheckoutForm
              funnel={funnel}
              paymentPlacement={paymentPlacement}
              activeProduct={activeProduct}
              onError={onPaymentError}
              onSuccess={onPaymentSuccess}
              onModalClosed={onModalClosed}
            />
          )}
        </div>
        <p className={styles.address}>{translate("payment_modal.address")}</p>
      </div>
    </>
  );
}

export default PaymentForm;