import React, { Component } from 'react'

import './auth.css'

import actions from 'app/actions'
import { TextInput, SubmitButton } from 'app/common'

export default class AuthLogin extends Component {
  state = {
    data: {
      username: "",
      password: "",
    },
    error: null,
  }

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(e) {
    e && e.preventDefault()
    this.setState({
      data: {
        ...this.state.data,
        [e.target.name]: e.target.value
      }
    })
  }

  handleSubmit(e) {
    e && e.preventDefault()
    this.setState({ error: null })
    actions.auth.login(this.state.data)
    .then(this.props.onAuthenticate)
    .catch(error => {
      console.error(error)
      this.setState({ error: error.description || error.message })
    })
  }

  render() {
    return (
      <form className='login' onSubmit={this.handleSubmit}>
        <h6>
          {'Welcome to Animism '}{'🐍'}
        </h6>
        <TextInput
          title="Username"
          name="username"
          data={this.state.data}
          onChange={this.handleChange}
          autoComplete="off"
        />
        <TextInput
          type="password"
          title="Password"
          name="password"
          data={this.state.data}
          onChange={this.handleChange}
          autoComplete="off"
        />
        <SubmitButton
          title="Log in"
          after={this.state.error}
        />
      </form>
    )
  }
}