// 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 (
        <div class="inventory top">
            <div class="news">
                <h1>support the game</h1>
                <p>
                    <b>credits</b> are in game currency that can be used to purchase:
                    <ul>
                        <li>img sets</li>
                        <li>construct renames</li>
                        <li>new constructs</li>
                    </ul>
                </p>
                <p>
                    <b>subscriptions</b> grant extra benefits:
                    <ul>
                        <li>additional credits</li>
                        <li>chat wheel (soon ™)</li>
                        <li>account icons (soon ™)</li>
                    </ul>
                </p>
            </div>
            <div>
                <h1 class="credits">¤ {account.balance}</h1>
                <Elements>
                    <StripeBtns account={account} />
                </Elements>
            </div>
        </div>
    );
}

module.exports = addState(Shop);