// 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 || 'register';

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

    const news = (
        <div class="news">
            <p> Welcome to mnml.</p>

            <p> MNML is a 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>

            <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
        </div>
    );

    const main = (['login', 'register', 'help'].includes(page)) 
        ? <section>{news}{pageEl()}</section>
        : <Demo />;

    return (
        <main class="menu welcome">
            <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 === 'info' ? 'highlight' : ''}`}
                        disabled={page === 'info'}
                        onClick={() => this.setState({ page: 'info' })}>
                        Info
                    </button>
                    <button
                        class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
                        disabled={page === 'help'}
                        onClick={() => this.setState({ page: 'help' })}>
                        Help
                    </button>
                </div>
            </header>
            <div class="top">
                {main}
            </div>
        </main>
    );
}

module.exports = Welcome;