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

const addState = connect(
    (state) => {
        const { ws, account } = state;
        function submitLogin(name, password) {
            return ws.sendAccountLogin(name, password);
        }
        function submitRegister(name, password) {
            console.log(name, password);
            return ws.sendAccountCreate(name, password);
        }
        return { account, submitLogin, submitRegister };
    },
);

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

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

        this.nameInput = this.nameInput.bind(this);
        this.passwordInput = this.passwordInput.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 });
    }

    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);
        console.log(this.state);
        this.setState({ name: '', password: '' });
    }


    render() {
        return (
            <main>
                <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}
                    />
                    <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);