// eslint-disable-next-line
const preact = require('preact');

const Login = require('./welcome.login');
const Register = require('./welcome.register');
const Help = require('./welcome.help');
// const About = require('./welcome.about');
const Demo = require('./demo');

function Welcome() {
    const page = this.state.page || 'login';

    const navRegister = () => this.setState({ page: 'register' });
    const pageEl = () => {
        if (page === 'login') return <Login />;
        if (page === 'register') return <Register />;
        if (page === 'help') return <Help />;
        return false;
    };

    return (
        <main class="menu">
            <header>
                <div class="options">
                    <button
                        onClick={() => this.setState({ page: 'login' })}
                        class='logo login-btn'>
                        &nbsp;
                    </button>
                    <button
                        class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
                        disabled={page === 'login'}
                        onClick={() => this.setState({ page: 'login' })}>
                        Login
                    </button>
                    <button
                        class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
                        disabled={page === 'register'}
                        onClick={() => this.setState({ page: 'register' })}>
                        Register
                    </button>
                    <button
                        class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
                        disabled={page === 'help'}
                        onClick={() => this.setState({ page: 'help' })}>
                        Help
                    </button>
                </div>
            </header>
            <div class="top">
                <section>
                    <div class="news">
                        <p>
                            Welcome to mnml.
                        </p>
                        <p> Turn-based 1v1 strategy game in an abstract setting. </p>
                        <p>
                            Build a unique team of 3 constructs from a range of skills and specialisations.<br />
                            Outplay your opponent in multiple rounds by adapting to an always shifting meta. <br />
                            Simple rules, complex interactions and unique mechanics.<br />
                        </p>
                        <p>
                            Free to play, no pay to win. Register to start playing.<br />
                        </p>
                    </div>
                    {pageEl()}
                </section>
            </div>
            <Demo />
        </main>
    );
}

module.exports = Welcome;