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 { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import CheckoutForm from "../CheckoutForm";
import PaymentMethodsChoice from "../../PaymentMethodsChoice";
import { EPaymentMethod } from "@/data/paymentMethods";

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

interface IPaymentFormProps {
    isSinglePayment?: boolean;
    className?: string;
    placementKey: EPlacementKeys;
    onPaymentError?: (error?: string) => void;
    onPaymentSuccess?: () => void;
    onModalClosed?: () => void;
}

function PaymentForm({ isSinglePayment = false, className, placementKey, 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: activeProduct?.trialDuration,
                                        })}
                                    </b>
                                ),
                                emailReminder: (
                                    <b>{translate("payment_modal.email_reminder")}</b>
                                ),
                            })}
                        </p>
                    </div>
                )}
                <div className={styles["payment-method-container"]}>
                    {!!activeProduct && <CheckoutForm
                        placementKey={placementKey}
                        activeProduct={activeProduct}
                        onError={onPaymentError}
                        onSuccess={onPaymentSuccess}
                        onModalClosed={onModalClosed}
                    />}
                </div>
                <p className={styles.address}>{translate("payment_modal.address")}</p>
            </div>
        </>
    )
}

export default PaymentForm