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

const { postData } = require('../utils');

const addState = connect(
    (state) => {
        const {
            ws
        } = state;
        function submitLogin(name, password) {
            postData('/login', { name, password })
                .then(data => ws.connect())
                .catch(error => console.error(error));
        }

        function submitRegister(name, password, code) {
            postData('/register', { name, password, code })
                .then(data => ws.connect())
                .catch(error => console.error(error));
        }

        return {
            submitLogin,
            submitRegister,
        }
    },
);

class Login extends Component {
    constructor(props) {
        super(props);

        this.state = { name: '', password: '', code: ''};

        this.nameInput = this.nameInput.bind(this);
        this.passwordInput = this.passwordInput.bind(this);
        this.codeInput = this.codeInput.bind(this);
        this.loginSubmit = this.loginSubmit.bind(this);
        this.registerSubmit = this.registerSubmit.bind(this);
    }

    nameInput(event) {
        this.setState({ name: event.target.value });
    }

    passwordInput(event) {
        this.setState({ password: event.target.value });
    }

    codeInput(event) {
        this.setState({ code: event.target.value });
    }

    loginSubmit(event) {
        event.preventDefault();
        console.log(this.state);
        this.props.submitLogin(this.state.name, this.state.password);
        this.setState({ name: '', password: '' });
    }

    registerSubmit(event) {
        event.preventDefault();
        this.props.submitRegister(this.state.name, this.state.password, this.state.code);
        console.log(this.state);
        this.setState({ name: '', password: '', code: ''});
    }


    render() {
        return (
            <main>
                <h1 class="mobile-title" >mnml.gg</h1>
                <div class="login">
                    <input
                        class="login-input"
                        type="email"
                        placeholder="username"
                        value={this.state.name}
                        onInput={this.nameInput}
                    />
                    <input
                        class="login-input"
                        type="password"
                        placeholder="password"
                        value={this.state.password}
                        onInput={this.passwordInput}
                    />
                    <input
                        class="login-input"
                        type="text"
                        placeholder="code"
                        value={this.state.code}
                        onInput={this.codeInput}
                    />
                    <button
                        class="login-btn"
                        onClick={this.loginSubmit}>
                        Login
                    </button>
                    <button
                        class="login-btn"
                        onClick={this.registerSubmit}>
                        Register
                    </button>
                    <button
                        class="login-btn"
                        onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
                        Discord + Invites
                    </button>
                </div>
            </main>
        );
    }
}

module.exports = addState(Login);