import "../App.css";
import fiu from "./fiu.png";
import { useNavigate } from "react-router-dom";
import React, { useState } from "react";
import { getToken } from "../api/fetchFromEndpoint";
import { Container, Button, Row, Col, Form, Toast } from "react-bootstrap";

function Home() {
  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("/user", {
            state: { username: username, token: data.token },
          });
        } else {
          alert(`Could not login. Error: ${statusMessage}`)
        }
      });
    } else {
      navigate("/user", {
        state: { username: username, token: authToken },
      });
    }
  };

  return (
    <div className="Home">
      <div className="text-white mt-5 text-center fs-2">
        <b>Course Evaluation System</b>
      </div>
      <Container className="mt-5">
        <Row>
          <Col>
            <img src={fiu} className="img-fluid" alt="fiu image" />
          </Col>

          <Col>
            <Form className="" onSubmit={handleSubmit}>
              <Form.Group className="mt-5" controlId="formBasicEmail">
                <Form.Label className="text-white">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-white">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: "#c5960c", color: "black" }}
              >
                Login
              </Button>
            </Form>
          </Col>
        </Row>
      </Container>

      <div className="text mt-5">
        <h3>
          About
          <br />
        </h3>
        The Course Evaluation System (CES) is an online computer software system
        designed to conduct course evaluations at the end of every semester. The
        system provides students with a list of courses provided by the School
        of Computing and Information Sciences that are receiving evaluations and
        for which they are registered; after the evaluation period is over the
        system generates reports maintaining the participant's anonymity, and
        then it allows administrators to look at the generated reports.
        <br />
        <br />
        Students can submit evaluations starting using their Internet connected
        home or lab computer. To log in, students need to use their University
        computer user name and their Panther ID number as the password.
        <h3>
          <br />
          Instructions
          <br />
        </h3>
        The form consists of 3 parts:
        <ul>
          <li>
            Part A - Survey of Course Delivery consists of several multiple
            choice questions that apply to all courses.
          </li>
          <li>
            Part B - Student Suggestions consists of a text box where students
            can enter their comments/suggestions.
          </li>
          <li>
            Part C - Survey of Course Outcomes consists of several multiple
            choice questions that apply specifically to the course being
            evaluated.
          </li>
        </ul>
        For each multiple choice question, you may select only one answer or
        leave it blank. The comments section may also be left blank.
        <br />
        <br />
        <ol>
          <li>
            During the evaluation period, select the LOGIN button above and
            provide your assigned username and password.
          </li>
          <li>
            After the system accepts your login, it will present you with a list
            of course sections for which you are registered and which are
            receiving evaluations.
          </li>
          <li>
            Choose one of the course sections by selecting the course number.
            The Course Evaluation Form for the selected section will appear on
            the screen.
          </li>
          <li>
            After making your selections and completing the comments section,
            select the "Confirm Selections" button at the bottom of the screen
            to verify your selections.
          </li>
          <li>
            After reviewing your selections, you may submit your evaluation by
            selecting the "Submit" button at the bottom of the review form.
          </li>
          <li>
            You will be redirected to the home page, where you can see the
            updated list of course sections. The courses for which you have
            submitted an evaluation will display an 'evaluation submitted'
            message.
          </li>
          <li>
            Once you have completed your evaluation forms, select the "Log Off"
            option listed on the top right side of the screen.
          </li>
          <li>
            You can log off and complete additional evaluations at a later time
            during the evaluation period. However, any evaluation you have
            submitted cannot be edited or read.
          </li>
          <li>
            You can change your password for future access to the system during
            the evaluation period by selecting the "Change My Password" option
            on the top right side of the screen. If you lose your password it
            can be reset by contacting staff at dev@cis.fiu.edu
          </li>
        </ol>
        <h3>
          <br />
          Privacy Policy
          <br />
        </h3>
        Your account information shall be used for authenticating your
        identification only. Your evaluations/comments shall remain anonymous.
        Instructors receive course summary reports and comments after grades are
        submitted.
        <h3>
          <br />
          Security
          <br />
        </h3>
        If you encounter the following message from your web browser when you
        log out of the Course Evaluation System do not be alarmed: "Warning! You
        have requested an insecure document..." When you log into the system,
        your web brower establishes and maintains a secure connection to the web
        application. Your web browser will indicate that the web page you are
        viewing is secure by displaying the closed yellow lock icon at the
        bottom of your web browser. After you log out of the Course Evaluation
        System, your browser may inform you that you are leaving the system to
        view a page which is not secure. This behavior is normal since the
        Course Evaluation System's welcome page is not a page which requires
        authentication to view as are many web pages you view on the Internet.
        In review, from the time you log into the system until after you log
        out, your connection to the server is secure.
        <h3>
          <br />
          Questions/Comments
          <br />
        </h3>
        If you have any questions or comments, please send an email to:
        dev@cis.fiu.edu
      </div>
    </div>
  );
}
export default Home;
