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

const Welcome = require('./welcome');
const Game = require('./game');
const Instance = require('./instance.component');
const Header = require('./header');
const Top = require('./main.top');
const Bottom = require('./main.bottom');

const addState = connect(
    state => {
        const { game, instance, account, nav } = state;
        return { game, instance, account, nav  };
    }
);

function Main(props) {
    const {
        game,
        instance,
        account,
        nav,
    } = props;

    if (!account) {
        return <Welcome />;
    }

    if (game) {
        return <Game />;
    }

    if (instance) {
        return <Instance />;
    }

    if (nav === 'transition') return false;

    return (
        <main class="menu">
            <Header />
            <Top />
            <Bottom />
        </main>
    );
}

module.exports = addState(Main);