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

/**
 * Tries to add a project to the system
 * @param {Object} props - Project name and description
 * @returns {boolean} True if created, false if not
 */
function CreateProject(props: { name: string; description: string }): void {
  const project: NewProject = {
    name: props.name,
    description: props.description,
  };

  api
    .createProject(project, localStorage.getItem("accessToken") ?? "")
    .then((response: APIResponse<void>) => {
      if (response.success) {
        alert("Project added!");
      } else {
        alert("Project NOT added!");
        console.error(response.message);
      }
    })
    .catch((error) => {
      alert("Project NOT added!");
      console.error("An error occurred during creation:", error);
    });
}

/**
 * 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("");

  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();
            CreateProject({
              name: name,
              description: description,
            });
          }}
        >
          <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>
          <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 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;