import React, { useState ,useEffect } from "react"
import { useHistory } from 'react-router';
import '../App.css'

export default function Login(props ) {
  let history = useHistory();
  const [user, setUser] = useState({email:"" , password:""})
  
  function validateForm() {
    return user.email.length > 0 && user.password.length > 0;  
  }
  useEffect(() => {
    if(localStorage.getItem("token")){
      history.push("/charts")
    }
  }, [])
    const handleSubmit = (e) => {   
      e.preventDefault();
      fetch('http://chartapi.imenso.co/api/login', {
        method: 'POST',
        body: JSON.stringify({ email:user.email ,password:user.password}),
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      })
        .then(res => res.json())
        .then(data => {
          if(data.status === "success"){
            localStorage.setItem("token" ,data.token)
            history.push("/charts")
          }
          else{
            alert("Invalid username / Password")
          }
          // localStorage.setItem("token" ,token)
          //   history.push("/dashboard")   
        })
      }
  return (
    <>
      <div className="App-header">
        <div style={{ width: "400px" }}>
          <form  onSubmit={handleSubmit}
          style={{ backgroundColor: "teal", padding: "50px", borderRadius: "25px" }}>
            <h3 style={{ fontFamily: "sans-serif", textAlign: "center",fontFamily:"sans-serif",fontWeight:"200",fontSize:"25px" }} class="mb-4">LOGIN</h3>
            <div >
              <label for="exampleInputEmail1" className="form-label">Email address</label>
              <input
                type="email"
                className="form-control"
                id="exampleInputEmail1"
                placeholder="Email Address"
                aria-describedby="emailHelp"
                value={user.email}
                onChange={e => setUser({ ...user, email: e.target.value })}

              />
              <div id="emailHelp" className="form-text"></div>
            </div>
            <div >
              <label for="exampleInputPassword1" className="form-label" > Password</label>
              <input
                type="password"
                className="form-control"
                id="exampleInputPassword1"
                placeholder="Password"
                value={user.password}
                onChange={e => setUser({ ...user, password: e.target.value})}
              />
            </div>

            <div style={{ textAlign: "center"}} className="mt-4">
              <button
                type="submit"
                
                className="btn btn-light w-100"
                
                disabled={!validateForm()}
              >  Login
              </button>
              
            </div>
          </form>
        </div>
      </div>
    </>
  )
}