import React, { Component } from 'react';
import {
  Col,
  Row,
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  Alert,
} from 'reactstrap';
import API, { setDefaults } from './Api';

class Login extends Component {
  constructor(props) {
    super(props);

    this.signIn = this.signIn.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      email: '',
      password: '',
      message: '',
    };
  }

  signIn(event) {
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    API.post('login', {}, {
      auth: {
        username: this.state.email,
        password: this.state.password,
      },
    })
      .then((response) => {
        if (response.status === 200) {
          setDefaults({
            Authorization: `Basic ${new Buffer(`${this.state.email}:${this.state.password}`).toString('base64')}`,
          });
          this.setState({ message: '' });
          this.props.history.push('/categories');
        } else {
          this.setState({ message: 'Mot de passe erroné !' });
        }
      })
      .catch(() => {
        this.setState({ message: 'Mot de passe erroné !' });
      });
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value,
    });
  }

  render() {
    return (
      <Row style={{ marginTop: '64px' }}>
        <Col
          className="Login"
          xs="12"
          sm={{ size: 4, offset: 4 }}
        >
          <h2>RodiVert :: Interface de saisie</h2>
          <img src="/logo.png" alt="RodiVert" style={{ margin: '22px' }} />
          <Form onSubmit={this.signIn}>
            <FormGroup row>
              <Label for="email" sm={4}>Email</Label>
              <Col sm={8}>
                <Input
                  type="email"
                  name="email"
                  id="email"
                  placeholder="Adresse mail"
                  onChange={this.handleChange}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Label for="password" sm={4}>Mot de passe</Label>
              <Col sm={8}>
                <Input
                  type="password"
                  name="password"
                  id="password"
                  placeholder="Mot de passe"
                  onChange={this.handleChange}
                />
              </Col>
            </FormGroup>
            {this.state.message !== ''
              ? (
                <Alert color="danger">
                  {this.state.message}
                </Alert>
              ) : (null)}
            <Button color="primary">Connexion</Button>
          </Form>
        </Col>
      </Row>
    );
  }
}

export default Login;