import { useEffect, useRef, useState } from "react";
import Button from "./Button";
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
import { Link } from "react-router-dom";
import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
import DeleteProject from "./DeleteProject";

function ProjectInfoModal(props: {
  projectname: string;
  onClose: () => void;
  onClick: (username: string) => void;
}): JSX.Element {
  const [users, setUsers] = useState<ProjectMember[]>([]);
  const [times, setTimes] = useState<projectTimes>();
  const totalTime = useRef(0);
  GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });

  GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });

  useEffect(() => {
    if (times?.totalTime !== undefined) {
      totalTime.current = times.totalTime;
    }
  }, [times]);

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
      flex justify-center items-center"
    >
      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
        <div className="pl-10 pr-10">
          <h1 className="font-bold text-[32px] mb-[20px]">
            {props.projectname}
          </h1>
          <div className="p-1 text-center">
            <h2 className="text-[20px] font-bold">Statistics:</h2>
          </div>
          <div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
            <p className="p-2">Number of members: {users.length}</p>
            <p className="p-2">Total time reported: {totalTime.current}</p>
          </div>
          <div className="h-[6vh] p-7 text-center">
            <h2 className="text-[20px] font-bold">Project members:</h2>
          </div>
          <div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
            <ul className="text-left font-medium space-y-2">
              <div></div>
              {users.map((user) => (
                <li
                  className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
                  key={user.Username}
                  onClick={() => {
                    props.onClick(user.Username);
                  }}
                >
                  <span>
                    Name: {user.Username}
                    <div></div>
                    Role: {user.UserRole}
                  </span>
                </li>
              ))}
            </ul>
          </div>
          <div className="space-x-5 my-2">
            <Button
              text={"Delete"}
              onClick={function (): void {
                if (
                  window.confirm(
                    "Are you sure you want to delete this project?",
                  )
                ) {
                  DeleteProject({
                    projectToDelete: props.projectname,
                  });
                }
              }}
              type="button"
            />
            <Link
              to={{
                pathname: "/adminProjectAddMember",
                search: props.projectname,
              }}
            >
              <Button
                text={"Add Member"}
                onClick={function (): void {
                  return;
                }}
                type="button"
              />
            </Link>
            <Button
              text={"Close"}
              onClick={function (): void {
                props.onClose();
              }}
              type="button"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProjectInfoModal;