import { useState } from "react";
import { NewProject } from "../Types/goTypes";
import ProjectInfoModal from "./ProjectInfoModal";
import UserInfoModal from "./UserInfoModal";
import DeleteUser from "./DeleteUser";

/**
 * A list of projects for admin manage projects page, that sets an onClick
 * function for eact project <li> element, which displays a modul with
 * user info.
 * @param props - An array of projects to display
 * @returns {JSX.Element} The project list
 * @example
 * const projects: NewProject[] = [{ name: "Project", description: "New" }];
 * return <ProjectListAdmin projects={projects} />
 */

export function ProjectListAdmin(props: {
  projects: NewProject[];
}): JSX.Element {
  const [projectModalVisible, setProjectModalVisible] = useState(false);
  const [projectname, setProjectname] = useState("");
  const [userModalVisible, setUserModalVisible] = useState(false);
  const [username, setUsername] = useState("");

  const handleClickUser = (username: string): void => {
    setUsername(username);
    setUserModalVisible(true);
  };

  const handleClickProject = (username: string): void => {
    setProjectname(username);
    setProjectModalVisible(true);
  };

  const handleCloseProject = (): void => {
    setProjectname("");
    setProjectModalVisible(false);
  };

  const handleCloseUser = (): void => {
    setProjectname("");
    setUserModalVisible(false);
  };

  return (
    <>
      <ProjectInfoModal
        onClose={handleCloseProject}
        onClick={handleClickUser}
        isVisible={projectModalVisible}
        projectname={projectname}
      />
      <UserInfoModal
        manageMember={true}
        onClose={handleCloseUser}
        //TODO: CHANGE TO REMOVE USER FROM PROJECT
        onDelete={() => DeleteUser}
        isVisible={userModalVisible}
        username={username}
      />
      <div>
        <ul className="font-bold underline text-[30px] cursor-pointer padding">
          {props.projects.map((project) => (
            <li
              className="pt-5"
              key={project.name}
              onClick={() => {
                handleClickProject(project.name);
              }}
            >
              {project.name}
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}
