/**
 *
 * LoginPage
 *
 */

import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage, injectIntl } from 'react-intl'

import { connect } from 'react-redux'
import { compose } from 'redux'
import injectSaga from 'utils/injectSaga'
import injectReducer from 'utils/injectReducer'
import Button from 'components/Button'
import styled from 'styled-components'
import messages from './messages'
// import api from '../../utils/apiFactory'
import saga from '../../sagas/LoginSagas'
import reducer, { Actions } from '../../redux/LoginRedux'

/* eslint-disable react/prefer-stateless-function */
export class LoginPage extends React.PureComponent {
  state = {
    username: '',
    password: '',
  }
  btnClick = () => {
    this.props.login(this.state.username, this.state.password)
    /* api
      .login(this.state.username, this.state.password)
      .then(response => console.log(response)) */
  }
  handleUsernameChange = event =>
    this.setState({ username: event.target.value })
  handlePasswordChange = event =>
    this.setState({ password: event.target.value })
  render() {
    return (
      <LoginContainer>
        <FormElement>
          <h1>
            <FormattedMessage {...messages.header} />
          </h1>
          <h2>
            <FormattedMessage {...messages.subhead} />
          </h2>
          <FormattedMessage {...messages.usernameInput}>
            {msg => (
              <LoginInput
                type="text"
                value={this.state.username}
                onChange={this.handleUsernameChange}
                placeholder={msg}
              />
            )}
          </FormattedMessage>
          <FormattedMessage {...messages.passwordInput}>
            {msg => (
              <LoginInput
                type="password"
                onChange={this.handlePasswordChange}
                value={this.state.password}
                placeholder={msg}
              />
            )}
          </FormattedMessage>
          <Button
            onClick={this.btnClick}
            disabled={
              !(this.state.username.length && this.state.password.length)
            }
          >
            <FormattedMessage {...messages.loginButtonContent} />
          </Button>
        </FormElement>
      </LoginContainer>
    )
  }
}

const LoginContainer = styled.div`
  margin: 0 auto;
  background-color: white;
  border: solid 1px gray;
  border-radius: 10px;
  width: 700px;
`

const LoginInput = styled.input`
  border: solid 1px gray;
  border-radius: 5px;
  padding: 12px;
  margin: 20px 0;
  display: block;
  width: 100%;
`

const FormElement = styled.div`
  padding: 30px;
`

LoginPage.propTypes = {
  login: PropTypes.func,
}

const mapDispatchToProps = {
  // defaultAction,
  // fetchData,

}

const withConnect = connect(
  // mapStateToProps,
  {},
  mapDispatchToProps,
)

export default compose(
  withReducer,
  withSaga,
  withConnect,
  injectIntl,
)(LoginPage)