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

const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container');
const InstanceConstructsContainer = require('./instance.constructs');
const EquipmentContainer = require('./instance.equip');
const ScoreBoard = require('./scoreboard');

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

const addState = connect(
    function receiveState(state) {
        const { instance, nav } = state;
        return { instance, nav };
    },

    function receiveDispatch(dispatch) {
        function setInfo(c) {
            return dispatch(actions.setInfo(c));
        }

        return {
            setInfo,
        };
    }
);

function Instance(args) {
    const {
        instance,
        setInfo,

        nav,
    } = args;

    if (!instance) return false;

    if (instance.phase !== 'InProgress') {
        return (
            <main class="instance lobby" onMouseOver={() => setInfo(null)} >
                <ScoreBoard />
            </main>
        );
    }

    const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
    return (
        <main class={instanceClasses} onMouseOver={() => setInfo(null)} >
            <Vbox />
            <InfoContainer />
            <InstanceConstructsContainer />
        </main>
    );
}

module.exports = addState(Instance);