import { h, Component } from 'preact';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import * as 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(value, name) {
    this.setState({
      [name]: value,
    })
  }
  validate(){
    if (!this.state.password || this.state.password !== this.state.password2) {
      return false
    }
    return true
  }
  handleSubmit(e) {
    e.preventDefault()
    if (this.props.auth.loading) return
    if (!this.validate()) {
      return this.props.actions.setError('bad password')
    }
    let { ...user } = this.state
    this.props.actions.signup(user)
  }
  render(){
    if (this.props.auth.isAuthenticated) {
      let { returnTo } = this.props.auth
      if (!returnTo || returnTo.match(/(api|login|logout|signup)/i)) {
        returnTo = '/'
      }
      return <Redirect to={returnTo} />
    }
    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}
            onInput={this.handleChange}
          />
          <TextInput
            title="Password"
            name="password"
            type="password"
            value={this.state.password}
            onInput={this.handleChange}
          />
          <TextInput
            title="Password again :)"
            name="password2"
            type="password"
            value={this.state.password2}
            onInput={this.handleChange}
          />
          <Button
            loading={this.props.auth.loading}
          >
            Sign up
          </Button>
          {this.renderAuthError()}
        </Group>
      </form>
    )
  }
  renderAuthError(){
    if (this.props.auth.error) {
      return (
        <div className='form-input-hint'>{"Please doublecheck the form (o=_o~~)"}</div>
      )
    }
    return <div className='form-input-hint'></div>
  }
}

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

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

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