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

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

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

        return {
            account,
        };
    },

    function receiveDispatch(dispatch) {
        function setMtxActive(mtx) {
            dispatch(actions.setMtxActive(mtx));
        }

        return {
            setMtxActive,
        };
    }
);

function Inventory(args) {
    const {
        account,
        setMtxActive,
    } = args;

    return (
        <div class="inventory">
            <h1>¤ {account.credits}</h1>
            <div class='list'>
                <figure onClick={() => setMtxActive('Reimage')} >
                    <figcaption>Reimage</figcaption>
                    <button>¤1</button>
                </figure>
                <figure onClick={() => setMtxActive('Rename')} >
                    <figcaption>Rename</figcaption>
                    <button>¤1</button>
                </figure>
                <figure>
                    <figcaption>Invader Architecture</figcaption>
                    <button>∞</button>
                </figure>
                <figure>
                    <figcaption>Molecular Architecture</figcaption>
                    <button>∞</button>
                </figure>
            </div>
        </div>
    );
}

module.exports = addState(Inventory);