/*
User login and logout controller

@copyright (c) Copyright 2013-2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

/* eslint-disable react/jsx-handler-names */

import {h, Component} from 'preact';  /** @jsx h*/

import FontAwesome from 'react-fontawesome';
import {observer} from 'mobx-observer';

import {userStore} from '../stores';


@observer
export class UserLogin extends Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      loginDisabled: true,
    };
    this.handleLoginAttempt = this.handleLoginAttempt.bind(this);
    this.handleClearLoginForm = this.handleClearLoginForm.bind(this);
    this.handleUsernameUpdate = this.handleUsernameUpdate.bind(this);
    this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
    this.handleKeyboardLogin = this.handleKeyboardLogin.bind(this);
  }

  handleLoginAttempt() {
    userStore.loginUser(this.state.username, this.state.password);
  }

  handleClearLoginForm() {
    this.setState({username: '', password: '', loginDisabled: true});
  }

  updateLoginDisable(username, password) {
    this.setState({loginDisabled: username === '' || password === '' })
  }

  handleUsernameUpdate(event) {
    const username = event.target.value;
    this.setState({username: username});
    this.updateLoginDisable(username, this.state.password);
  }

  handlePasswordUpdate(event) {
    const password = event.target.value;
    this.setState({password: password});
    this.updateLoginDisable(this.state.username, password);
  }

  handleKeyboardLogin(event) {
    if (event.key !== 'Enter' || this.state.loginDisabled) {
      return;
    }

    userStore.loginUser(this.state.username, this.state.password);
  }

  render() {
    let errorDisplay = userStore.loginMessage || '';
    if (errorDisplay !== undefined && errorDisplay !== '') {
      errorDisplay = (
        <div style={{
          color: '#FFFFFF',
          backgroundColor: '#A10000',
          padding: '10px',
          margin: '5px',
          borderRadius: '8px',
          border: '1px solid #111111',
        }}
        >
          { errorDisplay }
        </div>);
    }

    let loginForm = (
      <div onKeyPress={ this.handleKeyboardLogin }>
        {errorDisplay}
        <form
          style={{
            display: 'grid',
            gridTemplateColumns: '1fr 5fr',
            gridTemplateRows: '1fr 1fr 1fr',
          }}
        >
          <label htmlFor='username' style={{
            textAlign: 'right',
            verticalAlign: 'middle',
            marginRight: '10px'}}
          >
            Username
          </label>
          <input
            id='username'
            type='text'
            placeholder='Username'
            value={ this.state.username }
            onInput={ this.handleUsernameUpdate } />

          <label htmlFor='password' style={{
            marginTop: '10px',
            textAlign: 'right',
            verticalAlign: 'middle',
            marginRight: '10px'}}
          >
            Password
          </label>
          <input
            id='password'
            type='password'
            placeholder='***'
            style={{ marginTop: '10px'}}
            value={ this.state.password }
            onInput={ this.handlePasswordUpdate } />

          <div
            style={{
              gridColumn: 'span 2',
              display: 'flex',
              flexDirection: 'row',
              flexAlign: 'flex-end',
              justifyContent: 'flex-end',
              marginTop: '10px',
            }}
          >
            <button
              className='btn btn-warning'
              onClick={ this.handleClearLoginForm }
              style={{ marginRight: '10px' }}
              type='button'
            >
              Cancel
            </button>
            <button
              className='btn btn-primary'
              onClick={ this.handleLoginAttempt }
              disabled={ this.state.loginDisabled }
              type='button'
            >
              <FontAwesome name='sign-in'/>&nbsp;Login
            </button>
          </div>
        </form>
      </div>
    );

    return (
      <div style={{ paddingTop: '50px' }}>
        <div
          className='text-center muted'
          style={{ marginBottom: '10px' }}
        >
          Please login to continue...
        </div>
        { loginForm }
      </div>
    );
  }
}

@observer
export class UserLogOut extends Component {

  constructor(props) {
    super(props);
    this.handleLogoutUser = this.handleLogoutUser.bind(this);
  }

  handleLogoutUser() {
    userStore.logoutUser();
  }

  render() {
    const style = {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center',
      paddingTop: '20px',
    };

    return (
      <div style={ style }>
        <div>
          <FontAwesome name='user'/>&nbsp;Hello { userStore.fullName }!
        </div>
        <button
          style={{ marginLeft: '10px' }}
          className='btn btn-primary'
          onClick={ this.handleLogoutUser }
        >
          <FontAwesome name='sign-out'/>&nbsp;Logout
        </button>
      </div>
    );
  }
}
