// 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 Passives = require('./passive.container');

const addState = connect(
    (state) => {
        const { game, ws, account } = state;
        if (!game) {
            ws.clearGameStateInterval();
        }
        return state;
    },
    (dispatch) => {
        function setGame(game) {
            dispatch(actions.setGame(game));
        }
        return { setGame };
    }
);

function renderBody(props) {
    const { game, setGame, account } = props;
    console.log('grep');
    if (game) {
        return (
            <div>
                <GameContainer />
                <button
                    className="button is-dark is-fullwidth"
                    type="submit"
                    onClick={() => setGame(null)}
                >
                Return to Main Menu
                </button>
            </div>
        );
    }
    if (account) {
        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>
                <div className ="column">
                    <Passives />
                </div>
            </section>
        );
    } return <div>not ready</div>;
}

module.exports = addState(renderBody);