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
        ? <figure>
            <figcaption>Thank you for your support</figcaption>
            <button
                class="yellow-btn"
                disabled>
                Subscribed
            </button>
        </figure>
        : <figure onClick={subscribeClick}>
            <figcaption>¤150 / month + Chat Wheel + more</figcaption>
            <button
                class="yellow-btn"
                role="link">
                Subscribe
            </button>
        </figure>;

    return (
        <div>
            <div class='list sub'>
                {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);