import React, { useState } from 'react';
import { Elements } from '@stripe/react-stripe-js';

import { PrimaryButton } from "../buttons/primary_button";
import { ModalWindow } from "../modal_window";
import { CheckoutForm } from "./checkout_form";
import { AppleGooglePay } from "./apple_google_pay";
import { AmazonButton } from "./amazon_button";
import { PayPal } from "./pay_pal";
import { Divider } from "./divider";

import creditCard from '../../assets/paywall/credit_card.svg';
import { useStyles } from "./styles";

export type PaywallProps = {
    accessPaymentsKeys: {
        checkoutPayKey: string,
        braintreeAuthorization?: string,
        stripePromise?: any,
        amazonSellerId: string,
        amazonClientId: string
    },
    stripeProp: {
        price: number,
        currency: string
    }
    countryCode: string,
    onSubmit: any,
    isApplePayActive: boolean,
    isGooglePayActive: boolean,
    isPaypalActive: boolean,
    isAmazonActive: boolean,
    env: string,
    onAmazonButtonClicked: () => void
}

export const Paywall = ({
    onAmazonButtonClicked,
    accessPaymentsKeys,
    countryCode,
    onSubmit,
    stripeProp,
    isApplePayActive,
    isGooglePayActive,
    isPaypalActive,
    isAmazonActive,
    env
}: PaywallProps) => {
    const { button, buttonContent, cardIcon, hiddenWindow } = useStyles();
    const [open, setOpen] = useState(false)
    const [paymentRequest, setPaymentRequest] = useState<PaymentRequest | null>(null);
    const [stripeResult, setStripeResult] = useState<Record<string, boolean> | null>(null);

    const handleOpen = () => setOpen(!open)

    const {
        checkoutPayKey, stripePromise, braintreeAuthorization,
        amazonClientId, amazonSellerId
    } = accessPaymentsKeys;
    const isAppleGooglePayShowed =  isApplePayActive || isGooglePayActive;
    const isPaymentRequestShowed = !!(stripeResult?.applePay && paymentRequest)
        || !!(stripeResult?.applePay && paymentRequest);

    const isDividerShowed = (isAppleGooglePayShowed && isPaymentRequestShowed) || isPaypalActive

    return (
        <div>
            {isAppleGooglePayShowed && (
                <Elements stripe={stripePromise}>
                    <AppleGooglePay
                        paymentRequest={paymentRequest}
                        onSubmit={onSubmit}
                        setPaymentRequest={setPaymentRequest}
                        setStripeResult={setStripeResult}
                        isPaymentRequestShowed={isPaymentRequestShowed}
                        {...stripeProp}
                    />
                </Elements>
            )}
            {isPaypalActive && (
                <PayPal
                    braintreeAuthorization={braintreeAuthorization}
                    onSubmit={onSubmit}
                />
            )}
            {isAmazonActive && (
                <AmazonButton
                    onAuth={onAmazonButtonClicked}
                    clientId={amazonClientId}
                    sellerId={amazonSellerId}
                    env={env}
                />
            )}
            {isDividerShowed && <Divider />}
            <PrimaryButton
                onClick={handleOpen}
                className={button}
                //@ts-ignore
                label={(
                    <div className={buttonContent}>
                        <img className={cardIcon} src={creditCard} alt=""/>
                        Credit / Debit Card
                    </div>
                )}
            />
            <ModalWindow open rootClassName={!open ? hiddenWindow : ''}>
                <CheckoutForm
                    setOpen={setOpen}
                    onSubmit={onSubmit}
                    countryCode={countryCode}
                    publicKey={checkoutPayKey}
                />
            </ModalWindow>
        </div>
    )
}