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

const Header = require('./header');
const Team = require('./team');
const StripeBtns = require('./stripe.buttons');

const actions = require('./../actions');

const VERSION = process.env.npm_package_version;

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

        function mtxBuy(mtx) {
            return ws.sendMtxBuy(mtx.variant);
        }

        return {
            account,
            shop,
            mtxBuy,
        };
    },

    function receiveDispatch(dispatch) {
        function setMtxActive(mtx) {
            dispatch(actions.setConstructRename(null));
            dispatch(actions.setMtxActive(mtx));
            return true;
        }

        function setNav(place) {
            return dispatch(actions.setNav(place));
        }

        return {
            setMtxActive,
            setNav,
        };
    }
);

function Play(args) {
    const {
        account,
        shop,
        mtxBuy,

        setMtxActive,
        setNav,
    } = args;

    if (!shop) return false;

    const useMtx = (item, i) => (
        <figure key={i} onClick={() => setMtxActive(item)} >
            <figcaption>{item}</figcaption>
            <button disabled={account.balance === 0}>¤1</button>
        </figure>
    );

    const availableMtx = (item, i) => (
        <figure key={i} onClick={() => mtxBuy(item)} >
            <figcaption>{item.variant}</figcaption>
            <button disabled={account.balance < item.credits}>¤{item.credits}</button>
        </figure>
    );

    const subscription = account.subscribed
        ? <button
            class="stripe-btn"
            disabled>
            Subscribed
        </button>
        : <button
            onClick={() => setNav('shop')}
            class="stripe-btn"
            role="link">
            Subscribe
        </button>;


    return (
        <section class="top">
            <div class="news">
                <h1>mnml v{VERSION}</h1>
                <p>use the buttons on the right to join an instance.</p>
                <p>
                    select <b>PVP</b> to play against other players.<br />
                    click <b>LEARN</b> to practice the game without time controls.
                </p>
                <p>
                    if you enjoy the game please support its development by <b>subscribing</b> or purchasing <b>credits</b>.<br />
                    glhf
                </p>
                <p>--ntr & mashy</p>
            </div>
            <div>
                <h1 class="credits">¤ {account.balance}</h1>
                <div class='list'>
                    {subscription}
                    <button
                        onClick={() => setNav('shop')}
                        class="stripe-btn"
                        role="link">
                        Get Credits
                    </button>
                    <div id="error-message"></div>
                </div>
                <div class='list'>
                    {shop.owned.map(useMtx)}
                </div>
                <div class='list'>
                    {shop.available.map(availableMtx)}
                </div>
            </div>
        </section>
    );
}

module.exports = addState(Play);