import { useEffect, useState } from "react";
import Button from "./Button";
import AddMember, { AddMemberInfo } from "./AddMember";
import BackButton from "./BackButton";
import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
import GetAllUsers from "./GetAllUsers";

/**
 * Provides UI for adding a member to a project.
 * @returns {JSX.Element} - Returns the component UI for adding a member
 */
function AddUserToProject(props: { projectName: string }): JSX.Element {
  const [names, setNames] = useState<string[]>([]);
  const [users, setUsers] = useState<string[]>([]);
  const [usersProj, setUsersProj] = useState<ProjectMember[]>([]);

  // Gets all users and project members for filtering
  GetAllUsers({ setUsersProp: setUsers });
  GetUsersInProject({
    setUsersProp: setUsersProj,
    projectName: props.projectName,
  });
  /*
   * Filters the members from users so that users who are already
   * members are not shown
   */
  useEffect(() => {
    setUsers((prevUsers) => {
      const filteredUsers = prevUsers.filter(
        (user) =>
          !usersProj.some((projectUser) => projectUser.Username === user),
      );
      return filteredUsers;
    });
  }, [usersProj]);

  // Attempts to add all of the selected users to the project
  const handleAddClick = async (): Promise<void> => {
    if (names.length === 0)
      alert("You have to choose at least one user to add");
    for (const name of names) {
      const newMember: AddMemberInfo = {
        userName: name,
        projectName: props.projectName,
      };
      await AddMember({ memberToAdd: newMember });
    }
    setNames([]);
    location.reload();
  };

  // Updates the names that have been selected
  const handleUserClick = (user: string): void => {
    setNames((prevNames): string[] => {
      if (!prevNames.includes(user)) {
        return [...prevNames, user];
      }
      return prevNames.filter((name) => name !== user);
    });
  };

  return (
    <div className="border-4 border-black bg-white flex flex-col items-center pt-10 rounded-3xl content-center pl-20 pr-20  h-[63vh] w-[50] overflow-auto">
      <h1 className="text-center font-bold text-[36px] pb-10">
        {props.projectName}
      </h1>
      <p className="p-1 text-center font-bold text-[26px]">
        Choose users to add:
      </p>
      <div className="border-2 border-black pl-2 pr-2 pb-2 rounded-xl text-center overflow-auto h-[26vh] w-[26vh]">
        <ul className="text-center font-medium space-y-2">
          <div></div>
          {users.map((user) => (
            <li
              className={
                names.includes(user)
                  ? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black"
                  : "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 hover:text-slate-100 hover:cursor-pointer"
              }
              key={user}
              value={user}
              onClick={() => {
                handleUserClick(user);
              }}
            >
              <span>{user}</span>
            </li>
          ))}
        </ul>
      </div>
      <p className="pt-10 pb-5 underline text-center font-bold text-[18px]">
        Number of users to be added: {names.length}
      </p>
      <div className="space-x-10 items-center">
        <Button
          text="Add"
          onClick={(): void => {
            void handleAddClick();
          }}
          type="button"
        />
        <BackButton />
      </div>
      <p className="text-center text-gray-500 text-xs"></p>
    </div>
  );
}

export default AddUserToProject;
