import { useState } from "react";
import { api } from "../API/API";
import { NewProject } from "../Types/goTypes";
import InputField from "./InputField";
import Logo from "../assets/Logo.svg";
import Button from "./Button";

/**
 * Provides UI for adding a project to the system.
 * @returns {JSX.Element} - Returns the component UI for adding a project
 */
function AddProject(): JSX.Element {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");

  /**
   * Tries to add a project to the system
   */
  const handleCreateProject = async (): Promise<void> => {
    const project: NewProject = {
      name: name.replace(/ /g, ""),
      description: description.trim(),
    };
    try {
      const response = await api.createProject(
        project,
        localStorage.getItem("accessToken") ?? "",
      );
      if (response.success) {
        alert(`${project.name} added!`);
        setDescription("");
        setName("");
      } else {
        alert("Project not added, name could be taken");
        console.error(response.message);
      }
    } catch (error) {
      alert("Project not added");
      console.error(error);
    }
  };

  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 items-center justify-center flex flex-col w-fit h-fit"
          onSubmit={(e) => {
            e.preventDefault();
            void handleCreateProject();
          }}
        >
          <img
            src={Logo}
            className="logo w-[7vw] mb-10 mt-10"
            alt="TTIME Logo"
          />
          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
            Create a new project
          </h3>
          <div className="space-y-3">
            <InputField
              label="Name"
              type="text"
              value={name}
              onChange={(e) => {
                e.preventDefault();
                setName(e.target.value);
              }}
            />
            <InputField
              label="Description"
              type="text"
              value={description}
              onChange={(e) => {
                e.preventDefault();
                setDescription(e.target.value);
              }}
            />
          </div>
          <div className="flex items-center justify-between">
            <Button
              text="Create"
              onClick={(): void => {
                return;
              }}
              type="submit"
            />
          </div>
        </form>
        <p className="text-center text-gray-500 text-xs"></p>
      </div>
    </div>
  );
}

export default AddProject;