import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import '../styles/login-signup.scss';
import '../../node_modules/bootstrap/dist/css/bootstrap.css';
import { Form, Button } from 'react-bootstrap';
import axios from 'axios';
import { Spring, config } from 'react-spring/renderprops';

const Login = (props) => {
  const { authStatus, setAuthStatus } = props;

  const [loginInputs, setLoginInputs] = useState({
    username: '',
    password: '',
    email: '',
  });

  //used to toggle error message if auth fails
  //as well as redirect if auth succeeds
  const [loginStatus, setLoginStatus] = useState(null);

  const handleSubmit = async (e) => {
    let status;
    e.preventDefault();
    const { username, password } = loginInputs;
    const body = {
      username,
      password,
    };
    let response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });
    status = response.status;
    let data = await response.json();
    if (status === 200) {
      let email;
      setLoginStatus(true);
      setAuthStatus({ isLoggedIn: true, username: data.username, email: data.email });
    } else setLoginStatus(false);
  };

  const setInput = (e) => {
    setLoginInputs({ ...loginInputs, [e.target.id]: e.target.value });
  };

  return loginStatus || authStatus.isLoggedIn ? (
    <Redirect to={{ pathname: '/explore' }} />
  ) : (
    <Spring from={{ opacity: 0 }} to={{ opacity: 1 }} config={config.slow}>
      {(springProps) => (
        <div style={springProps} className="login-container">
          <div className="login-box">
            <center>
              <h4>Welcome Back!</h4>
            </center>
            <Form>
              <Form.Group controlId="username">
                <Form.Label>Username</Form.Label>
                <Form.Control type="username" placeholder="Username" onChange={setInput} />
              </Form.Group>

              <Form.Group controlId="password">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" placeholder="Password" onChange={setInput} />
              </Form.Group>

              <Button variant="primary" type="submit" onClick={handleSubmit}>
                Submit
              </Button>
              <div className={loginStatus === false ? 'error-msg' : 'hidden'}>
                Sorry, your username/password was invalid.
              </div>
            </Form>
            <br></br>
            <Button variant="primary" type="link" href="/api/auth/github">
              Log In with GitHub
            </Button>
          </div>
        </div>
      )}
    </Spring>
  );
};

export default Login;