import Logo from "/src/assets/Logo.svg";
import "./LoginPage.css";
import { Dispatch, FormEvent, SetStateAction, useState } from "react";
import BackgroundAnimation from "../Components/BackgroundAnimation";
import LoginField from "../Components/LoginField";
import LoginCheck from "../Components/LoginCheck";

function LoginPage(props: {
  setAuthority: Dispatch<SetStateAction<number>>;
}): JSX.Element {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  /* On submit (enter or button click) check if username and password match any user
   and if so, redirect to correct page */
  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
    event.preventDefault();
    props.setAuthority((prevAuth) => {
      prevAuth = LoginCheck({ username: username, password: password });
      return prevAuth;
    });
  }

  return (
    <>
      <BackgroundAnimation />
      <div
        className="flex flex-col h-screen items-center justify-center bg-cover bg-fixed"
        style={{
          animation: "backgroundTransition 30s infinite",
          backgroundSize: "cover",
          backgroundAttachment: "fixed",
        }}
      >
        <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
          <img
            src={Logo}
            className="logo w-[7vw] mb-10 mt-10"
            alt="TTIME Logo"
          />
          <h1 className="font-sans mb-4 font-bold text-[25px]">
            {" "}
            Welcome to TTIME!{" "}
          </h1>
          <h2 className="font-sans mb-4 text-[15px]">
            {" "}
            Please log in to continue{" "}
          </h2>
          <LoginField
            handleSubmit={handleSubmit}
            setUsername={setUsername}
            setPassword={setPassword}
            username={username}
            password={password}
          />
        </div>
      </div>
    </>
  );
}

export default LoginPage;