// const { connect } = require('preact-redux');
const preact = require('preact');
const { connect } = require('preact-redux');

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

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 Reshape(args) {
    const {
        account,
        shop,
        mtxBuy,

        setMtxActive,
        setNav,
    } = args;

    if (!shop) return false;

    const useMtx = (item, i) => {
        const price = item === 'Rename' ? 5 : 1;
        return (
            <figure key={i * 2} onClick={e => {
                e.stopPropagation();
                setMtxActive(item);
            }}>
                <figcaption>{item}</figcaption>
                <button disabled={account.balance === 0}>¤{price}</button>
            </figure>
        );
    };

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

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

    return (
        <section class="top" onClick={() => setMtxActive(null)}>
            <div class="news">
                <p class="play-p">Use credits to modify your construct names and appearance.</p>
                <ul>

                    <li> Purchase image sets to unlock different types of avatars. </li>
                    <li> You can reroll any avatar to a new avatar from owned sets. </li>
                    <li> Reroll avatars by clicking the owned set and then the construct you wish to reroll. </li>
                    <li>Press escape to clear any active mtx. </li>
                </ul>

                <p>
                    You can switch out your active constructs in the account settings. <br />
                    Accounts start with 4 constructs by default. <br />
                </p>
            </div>
            <div>
                <h1 class="credits">¤ {account.balance}</h1>
                <div class='list'>
                    {subscription}
                    <button
                        onClick={() => setNav('shop')}
                        class="yellow-btn"
                        role="link">
                        Get Credits
                    </button>
                    <div id="error-message"></div>
                </div>
                <div class='list'>
                    {shop.owned.map(useMtx)}
                    {shop.available.map(availableMtx)}
                </div>
            </div>
        </section>
    );
}

module.exports = addState(Reshape);