// External

// eslint-disable-next-line no-unused-vars
import React, { ChangeEvent, FormEvent } from 'react';
import { Link } from 'react-router-dom';

// Internal

import AvalonScrollbars from '../components/utils/AvalonScrollbars';
import Button from '../components/utils/Button';
import { Input } from '../components/utils/Input';

import { login } from '../components/auth/login';

// Styles

import '../styles/Login.scss';

// Declaration

interface LoginState {
  error: string | null;
  username: string;
  password: string;
}

class Login extends React.PureComponent<{}, LoginState> {
  state = {
    error: null,
    username: '',
    password: '',
  };

  handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({
      username: event.target.value,
    });
  };

  handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({
      password: event.target.value,
    });
  };

  handleSubmit = (event: FormEvent) => {
    event.preventDefault();

    this.setState({ error: null });
    
    login(this.state.username, this.state.password, (err) =>
      this.setState({ error: err })
    );
  };

  render() {
    return (
      <div id="Background" className="dark full">
        <AvalonScrollbars>
          <div id="Login" className="section">
            <form autoComplete="off" onSubmit={this.handleSubmit}>
              <div className="logo-big" />
              <h1>THE RESISTANCE: AVALON</h1>
              <h2>WILL GOOD TRIUMPH OVER EVIL?</h2>
              <p>
                <strong>The Resistance: Avalon</strong> is a social deduction game created
                by Don Eskridge.
              </p>
              <p className="last">
                Based on Arthurian legend, the loyal servants of Arthur work together to
                find the members of the Resistance while protecting the identity of
                Merlin. The minions of Mordred attempt to sneak onto the Resistance team
                in order to deduce the identity of Merlin and assassinate him. Will the
                minions of Mordred kill Merlin, or will the loyal servants triumph over
                evil?
              </p>
              <p className="last">
                The game is free to play on this site, and always will be.
              </p>
              {this.state.error ? (
                <p className="error">Error: {this.state.error}</p>
              ) : null}
              <div className="glow" />
              <div className="after-glow">
                <Input
                  placeholder="Username"
                  name="username"
                  type="text"
                  icon="user"
                  onChange={this.handleUsernameChange}
                />
                <Input
                  placeholder="Password"
                  name="password"
                  type="password"
                  icon="lock"
                  onChange={this.handlePasswordChange}
                />
                <Button type="submit" text="Login" onClick={undefined} className="" />
                <p>
                  <Link to="/signup">Sign up</Link>
                </p>
                <p className="footnote">Avalon.ist 2021</p>
              </div>
            </form>
          </div>
        </AvalonScrollbars>
      </div>
    );
  }
}

export default Login;