import React from "react";
import { Frames, CardNumber, ExpiryDate, Cvv } from "frames-react";

import { PrimaryButton } from "../../buttons/primary_button";
import { CardHeader } from "./card_header";

import { useCheckoutForm } from "./checkout_form.hook";
import { base, placeholder, valid, focus, invalid } from "./inline_styles";
import lockIcon from '../../../assets/paywall/lock.svg';
import blackLock from '../../../assets/paywall/black_lock.svg';
import visa from '../../../assets/paywall/visa_card.svg';
import mastercard from '../../../assets/paywall/mastercard_card.svg';
import amex from '../../../assets/paywall/amex_card.svg';
import discover from '../../../assets/paywall/discover_card.svg';
import diners from '../../../assets/paywall/diners_card.svg';
import errorCard from '../../../assets/paywall/error_card.svg';
import emptyCard from '../../../assets/paywall/empty_card.svg';
import closeIcon from '../../../assets/paywall/close_icon.svg';

import { useStyles } from "./styles";


type FormProps = {
    publicKey: string,
    countryCode: string,
    setOpen: (open: boolean) => any,
    onSubmit: any
}

const CARD_TYPES = {
    'Visa': visa,
    'Mastercard': mastercard,
    'American Express': amex,
    'Diners Club': diners,
    'Discover': discover
};

export const CheckoutForm = ({ publicKey, countryCode, onSubmit, setOpen }: FormProps) => {
    const {
        inputWrapper, inputName, inputErrorWrapper,
        form, buttonContent, cvvInput, errorText, close,
        cvvWrapper, zipCodeInput, button, cardIconError, cardIcon
    } = useStyles();

    const {
        cardName,
        cardValidationChanged, paymentMethodChanged, frameValidationChanged,
        handlePostalCodeChange, handleChangeName, handleSubmit,
        name, country, postalCode, loading, disabledBtn, errorMsgCard, errorMsgDate, errorMsgCvv,
        errorMsgCardEmpty, errorMsgDateEmpty, errorMsgCvvEmpty, loadedScript
    } = useCheckoutForm(countryCode, onSubmit);

    if (!loadedScript) return null;

    return (
        <div className={form}>
            <img
                onClick={() => setOpen(false)}
                className={close}
                src={closeIcon}
                alt=""
            />
            <CardHeader />
            <Frames
                config={{
                    publicKey,
                    localization: {
                        cardNumberPlaceholder: 'Card number',
                        expiryMonthPlaceholder: 'MM',
                        expiryYearPlaceholder: 'YY',
                        cvvPlaceholder: 'CVV',
                    },
                    style: { base, placeholder, invalid, focus, valid },
                    cardholder: { name }
                }}
                cardValidationChanged={cardValidationChanged}
                paymentMethodChanged={paymentMethodChanged}
                frameValidationChanged={frameValidationChanged}
                cardTokenized={() => {}}
                cardTokenizationFailed={(e: any) => console.log(e) }
            >
                <div>
                    <div className={`${inputWrapper} ${inputName}`}>
                        <input
                            value={name}
                            onChange={handleChangeName}
                            placeholder="Name on Card"
                            type='text'
                        />
                    </div>
                </div>
                <div className={inputErrorWrapper}>
                    <CardNumber />
                    {errorMsgCard && errorMsgCardEmpty
                        ? <img className={cardIconError} src={errorCard} alt=""/>
                        //@ts-ignore
                        : <img className={cardIcon} src={CARD_TYPES[cardName] || emptyCard} alt=""/>
                    }
                    {errorMsgCard && errorMsgCardEmpty && (
                        <p className={errorText}>{errorMsgCard}</p>
                    )}
                </div>
                <div className={cvvWrapper}>
                    <div className={inputErrorWrapper}>
                        <ExpiryDate />
                        {errorMsgDate && errorMsgDateEmpty && (
                            <p className={errorText}>{errorMsgDate}</p>
                        )}
                    </div>
                    <div className={`${cvvInput} ${inputErrorWrapper}`}>
                        <Cvv />
                        {errorMsgCvv && errorMsgCvvEmpty && (
                            <p className={errorText}>{errorMsgCvv}</p>
                        )}
                    </div>
                </div>
                {country === "US" && (
                    <div className={inputWrapper}>
                        <input
                            className={zipCodeInput}
                            value={postalCode}
                            onChange={handlePostalCodeChange}
                            placeholder="ZIP/Postal Code"
                            type="number"
                        />
                    </div>
                )}
                <PrimaryButton
                    className={button}
                    disabled={disabledBtn || loading}
                    onClick={handleSubmit}
                    //@ts-ignore
                    label={
                        <div className={buttonContent}>
                            <img src={disabledBtn || loading ? blackLock : lockIcon} alt=""/>
                            Start 7-Day trial
                        </div>
                    }
                />
            </Frames>
        </div>
    )
}