// 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  };
    }
);

class Main extends preact.Component {
    shouldComponentUpdate(newProps) {
        if (newProps.game !== this.props.game) return true;
        if (newProps.instance !== this.props.instance) return true;
        if (newProps.account !== this.props.account) return true;
        if (newProps.nav !== this.props.nav) return true;
        return false;
    }

    render(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);