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

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

const addState = connect(
    function receiveState(state) {
        const {
            tutorial,
        } = state;

        return {
            promptRegister: tutorial === 99, // see events
        };
    },
);

function Welcome(args) {

    const {
        promptRegister,
    } = args;

    const page = this.state.page || promptRegister && 'register' || 'login';

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

    const form = <div>{pageEl()}</div>;

    return (
        <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 === 'help' ? 'highlight' : ''}`}
                    disabled={page === 'help'}
                    onClick={() => this.setState({ page: 'help' })}>
                    Help
                </button>
            </div>
            {form}
        </header>
    );
}

module.exports = addState(Welcome);