import { useState } from "react";
import Button from "./Button";
import GetAllUsers from "./GetAllUsers";
import AddMember, { NewProjMember } from "./AddMember";
import BackButton from "./BackButton";

/**
 * 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 [name, setName] = useState("");
  const [users, setUsers] = useState<string[]>([]);
  const [role, setRole] = useState("");
  GetAllUsers({ setUsersProp: setUsers });

  const handleClick = (): boolean => {
    const newMember: NewProjMember = {
      username: name,
      projectname: props.projectName,
      role: role,
    };
    return AddMember({ memberToAdd: newMember });
  };

  return (
    <div className="border-4 border-black bg-white flex flex-col items-center justify-center rounded-3xl content-center pl-20 pr-20  h-[75vh] w-[50vh]">
      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
        User chosen: [{name}]
      </p>
      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
        Role chosen: [{role}]
      </p>
      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
        Project chosen: [{props.projectName}]
      </p>
      <p className="p-1">Choose role:</p>
      <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16] overflow-auto">
        <ul className="text-center items-center font-medium space-y-2">
          <li
            className="h-[10] w-[14] items-start px-2 py-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
            onClick={() => {
              setRole("member");
            }}
          >
            {"Member"}
          </li>
          <li
            className="h-[10] w-[14] items-start px-2 py-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
            onClick={() => {
              setRole("project_manager");
            }}
          >
            {"Project manager"}
          </li>
        </ul>
      </div>
      <p className="p-1">Choose user:</p>
      <div className="border-2 border-black p-2 rounded-xl text-center overflow-scroll h-[26vh] w-[26vh]">
        <ul className="text-center font-medium space-y-2">
          <div></div>
          {users.map((user) => (
            <li
              className="items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
              key={user}
              value={user}
              onClick={() => {
                setName(user);
              }}
            >
              <span>{user}</span>
            </li>
          ))}
        </ul>
      </div>
      <div className="flex space-x-5 items-center justify-between">
        <Button
          text="Add"
          onClick={(): void => {
            handleClick();
          }}
          type="submit"
        />
        <BackButton />
      </div>
      <p className="text-center text-gray-500 text-xs"></p>
    </div>
  );
}

export default AddUserToProject;