// 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 === 'about') return <About navRegister={navRegister} />;
        if (page === 'help') return <Help />;
        return false;
    };

    return (
        <main class="menu">
            <header>
                <div class="options">
                    <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 === 'about' ? 'highlight' : ''}`}
                        disabled={page === 'about'}
                        onClick={() => this.setState({ page: 'about' })}>
                        About
                    </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">
                        <h1>mnml.gg</h1>
                        <p>
                            mnml is a turn-based 1v1 strategy game in an abstract setting.<br />
                            outplay your opponents by building your team of 3 constructs from a shifting meta of skills, effects and specialisations.<br />
                        </p>
                        <p>
                            simple rules, complex interactions, simultaneous turns to increase the pace, and a unique speed mechanic;<br />
                            mnml is a tactical game unlike any other.
                        </p>
                        <p>
                            free to play<br />
                            no email required<br />
                            glhf
                        </p>
                    </div>
                    {pageEl()}
                </section>
            </div>
            <Demo />
        </main>
    );
}

module.exports = Welcome;