// node modules
import React from "react";
import {Meta, Story} from "@storybook/react";
import {loadStripe} from "@stripe/stripe-js";

// local components
import {Typography} from "../components/typography";
import {Paywall, PaywallProps} from "../components/paywall";
import {TypographyVariants} from "../constants";

export default {
    title: 'Example/Paywall',
} as Meta;

const PaywallTpl: Story<PaywallProps> = (args) => (
    <div style={{ margin: '0 auto', width: 378 }}>
        <Paywall {...args} />
    </div>
);

export const paywall = PaywallTpl.bind({});

paywall.args = {
    accessPaymentsKeys: {
        checkoutPayKey: 'pk_test_33acfb26-aead-4343-af11-0b1029cab4fe',
        braintreeAuthorization: 'sandbox_jy4v3cfy_2j94xsqgx8tssvrw',
        amazonSellerId: 'AKZ8CCAM2BLPW',
        amazonClientId: 'amzn1.application-oa2-client.336f5cacc3c742a18eee9247ef6937b9',
        stripePromise: loadStripe('pk_test_kFF4Rh23EWjaQtGZJhj1mVWr002fzzKWrV')
    },
    countryCode: 'US',
    stripeProp: {
        price: 10,
        currency: 'USD'
    },
    isPaypalActive: true,
    isAmazonActive: true,
    isApplePayActive: true,
    isGooglePayActive: true,
    loading: false,
    env: 'development',
    onAmazonButtonClicked: () => {
        console.log('amazonButtonClicked')
    },
    onSubmit: (props: any) => {
        console.log(props)
    },
    isModalCheckoutOpened: false,
    formText: (
        <Typography style={{ fontSize: 12, lineHeight: '18px', marginBottom: 12 }} variant={TypographyVariants.body1}>
            You will be charged only <span style={{ fontWeight: 500 }}>X$ for your 7-day trial.</span>
            We’ll <span style={{ fontWeight: 600 }}>email you a reminder</span> before your trial period ends. Cancel anytime.
        </Typography>
    ),
    error: 'There was an error processing your payment information. Please check your card number, expiry date and CVV and try again or try a new payment method.',
    modalCheckoutWindowTriggered: (state) => {
        console.log('the state of modal ', state);
    }
}
