// eslint-disable-next-line
const preact = require('preact');
const { connect } = require('preact-redux');
const actions = require('../actions');

const ItemListContainer = require('./item.list.container');
const CrypSpawnContainer = require('./cryp.spawn.container');
const GameJoinButton = require('./game.join.button');
const CrypListContainer = require('./cryp.list.container');
const GameContainer = require('./game.container');

const addState = connect(
    (state) => {
        const { game, ws } = state;

        if (!game) {
            console.log('out of game');
            ws.clearGameStateInterval();
        }

        return { game };
    },
    (dispatch) => {
        function setGame(game) {
            dispatch(actions.setGame(game));
        }
        return { setGame };
    },
);

function renderBody(props) {
    const { game, setGame } = props;
    if (game) {
        return (
            <div>
                <GameContainer />
                <button
                    className="button is-dark is-fullwidth"
                    type="submit"
                    onClick={() => setGame(null)}
                >
                Return to Main Menu
                </button>
            </div>
        );
    }
    return (
        <section className="columns">
            <div className="column is-4">
                <div className="column">
                    <GameJoinButton />
                    <CrypSpawnContainer />
                </div>
                <div className="column">
                    <div className="columns">
                        <div className="column is-8">
                            <CrypListContainer />
                        </div>
                        <div className="column">
                            <ItemListContainer />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

module.exports = addState(renderBody);