import { h, Component } from 'preact';
// import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
// import { Link } from 'react-router-dom';
import * as authActions from './auth.actions';

import { Group, Param, TextInput, Button } from '../common';

class Login extends Component {
  state = {
    username: '',
    password: '',
  }
  constructor() {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleChange(value, name) {
    this.setState({
      [name]: value,
      error: null,
    })
  }
  handleSubmit(e) {
    e.preventDefault()
    if (this.props.auth.loading) return
    this.props.actions.login(this.state.username, this.state.password)
  }
  render(){
    if (this.props.auth.isAuthenticated) {
      let { returnTo } = this.props.auth
      if (!returnTo || returnTo.match(/(login|logout|signup)/i)) {
        returnTo = '/'
      }
      return <Redirect to={returnTo} />
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <h1>Log in</h1><br />
        <Group>
          <TextInput
            autofocus
            autocapitalize="off"
            autocomplete="off"
            title="Username"
            name="username"
            type="text"
            value={this.state.username}
            onInput={this.handleChange}
          />
          <TextInput
            title="Password"
            name="password"
            type="password"
            value={this.state.password}
            onInput={this.handleChange}
          />
          <Button
            loading={this.props.auth.loading}
          >
            Login
          </Button>
          {this.renderAuthError()}
        </Group>
      </form>
    )
  }
  renderAuthError(){
    if (this.props.auth.error) {
      return (
        <div className='form-input-hint'>{"There was an error logging you in (bad password?)"}</div>
      )
    }
    return null
  }
}

const mapStateToProps = (state) => ({
  auth: state.auth,
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(authActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);