import React, { useState } from "react";

import { AddressBook } from "./amazon_address_book";
import { WalletWidget } from "./wallet_widget";
import { ConsentWidget } from "./consent_widget";
import { PrimaryButton } from "../buttons/primary_button";
import { LoaderBox } from "./loader_box";

import blackLock from "../../assets/paywall/black_lock.svg";
import lockIcon from "../../assets/paywall/lock.svg";
import { useStyles } from "./styles";

type AmazonPaymentProps = {
    sellerId: string,
    onSubmit: any
};

export const AmazonPayment = ({ sellerId, onSubmit }: AmazonPaymentProps) => {
    const { button, buttonContent, checkboxLabel } = useStyles();
    const [oro, setOro] = useState('');
    const [additionalDisable, setAdditionalDisable] = useState(false);
    const [loading, setLoading] = useState(false);
    const [consent, setConsent] = useState(false);
    const [billingId, setBillingId] = useState('');

    const handleWalletReady = (agreement: any) => {
        setBillingId(agreement.getAmazonBillingAgreementId());
    }

    const onConsent = (consent: boolean) => {
        setConsent(consent);
        setAdditionalDisable(false);
    }

    const handleSubmit = () => {
        if(!consent || additionalDisable) return;

        setLoading(true);

        onSubmit({ billingId, type: 'amazonPay' })
            .then(({ error }: any) => {
                if(error) {
                    const isError = error.indexOf('InvalidPaymentMethod') > -1
                        || error.indexOf('TransactionTimedOut') > -1
                        || error.indexOf('AmazonRejected') > -1
                        || error.indexOf('ProcessingFailure') > -1;

                    if(isError) {
                        setAdditionalDisable(true);
                    }
                }

                setLoading(false);
            })
    }

    const disabledBtn = (!consent && additionalDisable) || loading;

    return (
        <div>
            {!consent && (
                <div className={checkboxLabel}>
                    Click on the checkbox below to continue.
                </div>
            )}
            {!billingId && <LoaderBox />}
            <AddressBook
                sellerId={sellerId}
                setOro={setOro}
                agreementType="BillingAgreement"
            />
            {oro && !loading && (
                <WalletWidget
                    oro={oro}
                    sellerId={sellerId}
                    agreementType="BillingAgreement"
                    onReady={handleWalletReady}
                    onPaymentSelect={() => setAdditionalDisable(false)}
                />
            )}
            {billingId && (
                <ConsentWidget
                    sellerId={sellerId}
                    amazonBillingAgreementId={billingId}
                    onConsent={onConsent}
                />
            )}
            <PrimaryButton
                onClick={handleSubmit}
                className={button}
                //@ts-ignore
                label={(
                    <div className={buttonContent}>
                        <img src={disabledBtn || loading ? blackLock : lockIcon} alt=""/>
                        Start 7-Day trial
                    </div>
                )}
            />
        </div>
    )
}
