import { useState } from "react";
import { NewUser } from "../Types/goTypes";
import { api } from "../API/API";
import Logo from "../assets/Logo.svg";
import Button from "./Button";
import UsernameInput from "./Inputs/UsernameInput";
import PasswordInput from "./Inputs/PasswordInput";
import { alphanumeric, lowercase } from "../Data/regex";
import {
  passwordLength,
  usernameLowLimit,
  usernameUpLimit,
} from "../Data/constants";

/**
 * Renders a registration form for the admin to add new users in.
 * @returns The JSX element representing the registration form.
 */
export default function Register(): JSX.Element {
  const [username, setUsername] = useState<string>();
  const [password, setPassword] = useState<string>();
  const [errMessage, setErrMessage] = useState<string>();

  const handleRegister = async (): Promise<void> => {
    if (username !== undefined) {
      if (
        username.length > usernameUpLimit ||
        username.length < usernameLowLimit ||
        !alphanumeric.test(username)
      ) {
        alert(
          "Please provide valid username: \n-Between 5-10 characters \n-No special characters (.-!?/*)",
        );
        return;
      }
    }
    if (password !== undefined) {
      if (password.length !== passwordLength || !lowercase.test(password)) {
        alert(
          "Please provide valid password: \n-Exactly 6 characters \n-No uppercase letters \n-No numbers \n-No special characters (.-!?/*)",
        );
        return;
      }
    }
    const newUser: NewUser = {
      username: username?.replace(/ /g, "") ?? "",
      password: password ?? "",
    };
    const response = await api.registerUser(newUser);
    if (response.success) {
      alert(`${newUser.username} added!`);
      setPassword("");
      setUsername("");
    } else {
      alert("User not added, name could be taken");
      setErrMessage(response.message ?? "Unknown error");
      console.error(errMessage);
    }
  };

  return (
    <div className="flex flex-col h-fit w-screen items-center justify-center">
      <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">
        <form
          className="bg-white rounded px-8 pt-6 pb-8 mb-4 justify-center flex flex-col w-fit h-fit"
          onSubmit={(e) => {
            e.preventDefault();
            void handleRegister();
          }}
        >
          <img
            src={Logo}
            className="logo self-center w-[7vw] mb-10 mt-10"
            alt="TTIME Logo"
          />
          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
            Register New User
          </h3>

          <UsernameInput
            username={username ?? ""}
            onChange={(e) => {
              setUsername(e.target.value);
            }}
          />
          <div className="py-2" />
          <PasswordInput
            password={password ?? ""}
            onChange={(e) => {
              setPassword(e.target.value);
            }}
          />

          <div className="flex self-center justify-between">
            <Button
              text="Register"
              onClick={(): void => {
                return;
              }}
              type="submit"
            />
          </div>
        </form>
        <p className="text-center text-gray-500 text-xs"></p>
      </div>
    </div>
  );
}