// const { connect } = require('preact-redux');
const preact = require('preact');
const { connect } = require('preact-redux');
const { Elements } = require('react-stripe-elements');

const StripeBtns = require('./stripe.buttons');
const actions = require('./../actions');

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            account,
        } = state;

        return {
            account,
        };
    },
);

function Shop(args) {
    const {
        account,
    } = args;

    return (
        <section class="top">
            <div class="news">
                <h1>Support MNML</h1>
                <p>
                    <b>Credits</b> are in game currency used to change your team appearance:
                    <ul>
                        <li>Image sets</li>
                        <li>Reroll construct image from owned sets </li>
                        <li>Construct renames</li>
                        <li>New constructs</li>
                    </ul>
                </p>
                <p>
                    <b>Subscriptions</b> grant extra benefits:
                    <ul>
                        <li>¤150 per month</li>
                        <li>Account img</li>
                        <li>Chat wheel</li>
                    </ul>
                </p>
            </div>
            <div>
                <h1 class="credits">¤ {account.balance}</h1>
                {window.Stripe
                    ? <Elements>
                        <StripeBtns account={account} />
                    </Elements>
                    : <div>Please unblock Stripe to use the store</div>
                }
            </div>
        </section>
    );
}

module.exports = addState(Shop);