// @flow
// Third party.
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

// Session store.
import type { SessionState } from '../../../constants/types'
import { logIn } from '../../../store/session'

// Login component.
import Login from './Login'

// Login Container.
class LoginContainer extends Component {
  props: {
    session: SessionState,
    logIn: Function
  }

  state: {
    username: string,
    password: string
  }

  constructor (props) {
    super(props)
    this.state = {
      username: '',
      password: ''
    }
  }

  render () {
    return (
      <Login
        disabled={this._isFormDisabled()}
        idle={this.props.session.idle}
        error={this.props.session.error}
        onUsernameChange={this._handleUsernameChange}
        onPasswordChange={this._handlePasswordChange}
        onSubmit={this._handleFormSubmit} />
    )
  }

  _isFormDisabled = () => {
    return !(this.state.username.trim().length && this.state.password.trim().length)
  }

  _handleUsernameChange = ({ target: { value } }) => {
    this.setState({ username: value })
  }

  _handlePasswordChange = ({ target: { value } }) => {
    this.setState({ password: value })
  }

  _handleFormSubmit = (e) => {
    e.preventDefault()
    this.props.logIn(this.state.username, this.state.password)
  }
}

// Map state and actions.
const mapStateToProps = ({ session }) => ({ session })
const mapDispatchToProps = (dispatch) => bindActionCreators({ logIn }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)