import { useState } from "react";
import { APIResponse, api } from "../API/API";
import { NewProject, Project } 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 props - Project name and description
 * @returns {boolean} True if created, false if not
 */
function CreateProject(props: { name: string; description: string }): boolean {
  const project: NewProject = {
    name: props.name,
    description: props.name,
  };

  let created = false;

  api
    .createProject(project, localStorage.getItem("accessToken") ?? "")
    .then((response: APIResponse<Project>) => {
      //vv_FOR DEBGUGGING_vv
      console.log(localStorage.getItem("accessToken"));

      if (response.success) {
        created = true;
      } else {
        console.error("Could not add project");
      }
    })
    .catch((error) => {
      console.error("An error occurred during creation:", error);
    });
  return created;
}

/**
 * Tries to add a project to the system
 * @returns {JSX.Element} UI for project adding
 */
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) => {
              setName(e.target.value);
            }}
          />
          <InputField
            label="Description"
            type="text"
            value={description}
            onChange={(e) => {
              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;