const preact = require('preact');
const { injectStripe } = require('react-stripe-elements');

function subPlan() {
    if (window.location.host === 'mnml.gg') return 'plan_Fjdtsd4i7aVLe1';
    return 'prod_FWSA8RoyMMV3st';
}

function bitsSku(d) {
    if (window.location.host === 'mnml.gg') {
        if (d === 50) return 'sku_Fl5tLCWogUsgus';
        if (d === 20) return 'sku_Fl5qegnxYRv7Cy';
        if (d === 10) return 'sku_Fl5qVosoDsUVgy';
        if (d === 5) return 'sku_Fjdu7zOy3sLGc5';

        // !!!!
        return 'sku_Fjdu7zOy3sLGc5';
    }
    return 'sku_FjuNxONdWewjH2';
}

function BitsBtn(args) {
    const {
        stripe,
        account,
    } = args;

    function subscribeClick() {
        stripe.redirectToCheckout({
            items: [{ plan: subPlan(), quantity: 1 }],
            successUrl: window.location.origin,
            cancelUrl: window.location.origin,
            clientReferenceId: account.id,
        });
    }

    function bitsClick(d) {
        stripe.redirectToCheckout({
            items: [{ sku: bitsSku(d), quantity: 1 }],
            successUrl: window.location.origin,
            cancelUrl: window.location.origin,
            clientReferenceId: account.id,
        });
    }

    const subscription = account.subscribed
        ? <button
            class="yellow-btn"
            disabled>
            Subscribed
        </button>
        : <button
            onClick={subscribeClick}
            class="yellow-btn"
            role="link">
            Subscribe
        </button>;

    return (
        <div>
            <div class='list'>
                {subscription}
            </div>
            <div class='list'>
                <figure onClick={() => bitsClick(5)} >
                    <figcaption>$5 AUD</figcaption>
                    <button class="yellow-btn">¤50</button>
                </figure>
                <figure onClick={() => bitsClick(10)} >
                    <figcaption>$10 AUD</figcaption>
                    <button class="yellow-btn">¤110</button>
                </figure>
                <figure onClick={() => bitsClick(20)} >
                    <figcaption>$20 AUD</figcaption>
                    <button class="yellow-btn">¤250</button>
                </figure>
                <figure onClick={() => bitsClick(50)} >
                    <figcaption>$50 AUD</figcaption>
                    <button class="yellow-btn">¤660</button>
                </figure>
                <div id="error-message"></div>
            </div>
        </div>
    );
}

module.exports = injectStripe(BitsBtn);