import { h, Component } from 'preact';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import actions from './auth.actions';

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

class Signup extends Component {
  state = {
    username: '',
    password: '',
    password2: '',
  }
  constructor() {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleChange(e) {
    const name = e.target.name
    const value = e.target.value
    this.setState({
      [name]: value,
      error: null,
    })
  }
  validate(){
    if (!this.state.password || this.state.password !== this.state.password2) {
      return false
    }
    return true
  }
  handleSubmit(e) {
    e.preventDefault()
    if (!this.validate) {
      return this.props.actions.setError('bad password')
    }
    this.props.actions.signup(this.state)
  }
  render(){
    if (this.props.auth.isAuthenticated) {
      return <Redirect to="/" />
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <h1>New account</h1><br />
        <Group>
          <TextInput
            autofocus
            autocapitalize="off"
            autocomplete="off"
            title="Username"
            name="username"
            type="text"
            value={this.state.username}
            onChange={this.handleChange}
          />
          <TextInput
            title="Password"
            name="password"
            type="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
          <TextInput
            title="Password again :)"
            name="password2"
            type="password"
            value={this.state.password2}
            onChange={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'>{"Please doublecheck the form"}</div>
      )
    }
    return null
  }
}

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

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

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