import "../App.css";
import fiu from "./fiu.png";
import { useNavigate } from "react-router-dom";
import React, { useState } from "react";
import "mdb-react-ui-kit/dist/css/mdb.min.css";
import { Container, Button, Row, Col, Form } from "react-bootstrap";
import { getToken } from "../api/fetchFromEndpoint";
//import {  } from 'expo-linear-gradient'

function FacultyLogin() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const [authenticated, setAuthenticated] = useState(false);
  const [authToken, setAuthToken] = useState("");
  const navigate = useNavigate();

  const handleSubmit = event => {
    event.preventDefault();

    if (!authenticated) {
      getToken(username, password).then(({ status, statusMessage, data }) => {
        if (status === 200) {
          setAuthenticated(true);
          setAuthToken(data.token);
          navigate("/faculty", {
            state: { username: username, token: data.token },
          });
        } else {
          alert(`Could not login. Error: ${statusMessage}`)
        }
      });
    } else {
      navigate("/faculty", {
        state: { username: username, token: authToken },
      });
    }
  };


  return (

    <div className="FacultyLogin">

      <div className="text-black mt-5 text-center fs-1"><b>Course Evaluation System</b></div>
      <div className="text-black text-center fs-3"><b>Faculty Login</b></div>

      <Container className="mt-5">
        <Row>
          <Col><img src={fiu} className="img-fluid" alt="Sample image" /></Col>

          <Col>
            <Form onSubmit={handleSubmit}>
              <Form.Group className="mt-5" controlId="formBasicEmail">
                <Form.Label className="text-black">Username</Form.Label>
                <Form.Control type="username" placeholder="Enter username..." value={username} onChange={(event) => setUsername(event.target.value)} />
              </Form.Group>

              <Form.Group className="mt-4" controlId="formBasicPassword">
                <Form.Label className="text-black">Password</Form.Label>
                <Form.Control type="password" placeholder="Enter password..." value={password} onChange={event => setPassword(event.target.value)} />
              </Form.Group>

              <Button className="mt-5 mb-5" variant="primary" type="submit" style={{ background: "#FFCC00", color: "black" }}>
                Login
              </Button>

            </Form>
          </Col>
        </Row>
      </Container>
    </div>
  );
}
export default FacultyLogin;