import React from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
import axios from 'axios';
import Cookies from 'js-cookie';

import { Form, InputGroup, FormControl } from 'react-bootstrap';
import Button from 'react-uwp/Button';
import ErrorHandler from './ErrorHandler';
import { logIn } from '../modules/action';
import { connect } from 'react-redux';
import { restUrl } from '../env';

class Auth extends React.Component {
  state = {
    redirectToReferrer: false,
    isLoginFailed: false,
    isServerDown: false
  };

  static propTypes = {
    location: PropTypes.object.isRequired,
    logIn: PropTypes.func.isRequired,
    // eslint-disable-next-line react/boolean-prop-naming
    loggedIn: PropTypes.bool.isRequired
  };

  async componentDidMount() {
    this.usernameInput.focus();
    const { loggedIn, logIn } = this.props;
    if (loggedIn) {
      return this.setState({ redirectToReferrer: true });
    }

    const token = Cookies.get('fifa-profile');
    const decoded = await verifyToken(token);
    if (decoded) {
      logIn(decoded.username);
      return this.setState({ redirectToReferrer: true });
    }
  }

  handleUsernameChange = event => {
    const username = event.target.value;
    this.setState({ username });
  };

  handleLogin = async event => {
    // Send login request here. Passed when success status true from server
    event.preventDefault();
    const { username } = this.state;
    const { logIn } = this.props;

    try {
      const response = await axios.post(`${restUrl}/auth/login`, { username });
      if (!response.data.success || !response) {
        return this.setState({ isLoginFailed: true });
      }

      Cookies.set('fifa-profile', response.data.token);
      logIn(username);
      this.setState({ redirectToReferrer: true });
    } catch (error) {
      console.log(error.message);
      return this.setState({ isServerDown: true });
    }
  };

  enterUsername() {
    return (
      <div>
        <Form onSubmit={this.handleLogin}>
          <InputGroup>
            <FormControl
              ref={input => {
                this.usernameInput = input;
              }}
              placeholder="Enter your alias here"
              name="username"
              aria-label="username"
              aria-describedby="text"
              onChange={this.handleUsernameChange}
            />
            <InputGroup.Append>
              <Button>Submit</Button>
            </InputGroup.Append>
          </InputGroup>
        </Form>
      </div>
    );
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } };
    const { redirectToReferrer, isServerDown, isLoginFailed } = this.state;

    if (redirectToReferrer === true) {
      return <Redirect to={from} />;
    }

    return (
      <>
        {isServerDown && (
          <ErrorHandler
            redirectUrl="/"
            error={{
              title: 'SEVERS ARE DOWN FOR MAINTAINENCE!',
              content: 'WE WILL BE BACK SOON, BIGGER AND BETTER'
            }}
            resetError={() => {
              this.setState({ isServerDown: false });
            }}
          />
        )}
        {isLoginFailed && (
          <ErrorHandler
            redirectUrl="/"
            error={{
              title: 'LOGIN FAILED, TRY AGAIN!',
              content: 'CHECK YOUR CREDENTIALS OR TRY ANOTHER NAME'
            }}
            resetError={() => {
              this.setState({ isLoginFailed: false });
            }}
          />
        )}
        <div className="row align-items-center justify-content-left">
          <div className="col-sm-12 col-md-6">
            {introInfo()}
            {this.enterUsername()}
          </div>
        </div>
      </>
    );
  }
}

const introInfo = () => {
  return (
    <div>
      <div>Hate the default lineup?</div>
      <div>
        Build custom teams <br /> with your friends. <br />
      </div>
      <div>
        Create or join a room to start <br /> custom draft with your friends <br />
      </div>
    </div>
  );
};

const verifyToken = async token => {
  const response = await axios.post(`${restUrl}/auth/verify`, { token });
  if (response.data.success) {
    return response.data.decoded;
  }
  return undefined;
};

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

const mapDispatchToProps = dispatch => ({
  logIn: username => dispatch(logIn({ username }))
});

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