import Button from "../Components/Button";
import Logo from "/src/assets/Logo.svg";
import "./LoginPage.css";
import { FormEvent, useEffect, useState } from "react";
import { NewUser } from "../Types/Users";
import { useNavigate } from "react-router-dom";

const PreloadBackgroundAnimation = (): JSX.Element => {
  useEffect(() => {
    const images = [
      "src/assets/1.jpg",
      "src/assets/2.jpg",
      "src/assets/3.jpg",
      "src/assets/4.jpg",
    ];

    // Pre-load images
    for (const i of images) {
      console.log(i);
    }

    // Start animation
    document.body.style.animation = "backgroundTransition 30s infinite";
  }, []);

  return <></>;
};

function LoginPage(): JSX.Element {
  //Example users for testing without backend, remove when using backend
  const admin: NewUser = {
    userName: "admin",
    password: "123",
  };
  const pmanager: NewUser = {
    userName: "pmanager",
    password: "123",
  };
  const user: NewUser = {
    userName: "user",
    password: "123",
  };

  const navigate = useNavigate();

  /* 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();
    //TODO: Compare with db instead when finished
    if (username === admin.userName && password === admin.password) {
      navigate("/admin-menu");
    } else if (
      username === pmanager.userName &&
      password === pmanager.password
    ) {
      navigate("/PM-project-page");
    } else if (username === user.userName && password === user.password) {
      navigate("/your-projects");
    }
  }

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

  return (
    <>
      <PreloadBackgroundAnimation />
      <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>
          <form className="flex flex-col items-center" onSubmit={handleSubmit}>
            <input
              className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
              type="text"
              placeholder="Username"
              onChange={(e) => {
                setUsername(e.target.value);
              }}
            />
            <input
              className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
              type="password"
              placeholder="Password"
              onChange={(e) => {
                setPassword(e.target.value);
              }}
            />
            <Button
              text="Login"
              onClick={(): void => {
                return;
              }}
            />
          </form>
        </div>
      </div>
    </>
  );
}

export default LoginPage;