import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

function ProjectMembers(): JSX.Element {
  const { projectName } = useParams();
  const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);

  //   const getProjectMembers = async (): Promise<void> => {
  //     const token = localStorage.getItem("accessToken") ?? "";
  //     const response = await api.getProjectMembers(projectName ?? "", token);
  //     console.log(response);
  //     if (response.success) {
  //       setProjectMembers(response.data ?? []);
  //     } else {
  //       console.error(response.message);
  //     }
  //   };

  interface ProjectMember {
    username: string;
    role: string;
  }

  const mockProjectMembers = [
    {
      username: "username1",
      role: "Project Manager",
    },
    {
      username: "username2",
      role: "System Manager",
    },
    {
      username: "username3",
      role: "Developer",
    },
    {
      username: "username4",
      role: "Tester",
    },
    {
      username: "username5",
      role: "Tester",
    },
    {
      username: "username6",
      role: "Tester",
    },
  ];

  const getProjectMembers = async (): Promise<void> => {
    // Use the mock data
    setProjectMembers(mockProjectMembers);

    await Promise.resolve();
  };

  useEffect(() => {
    void getProjectMembers();
  }, []);

  return (
    <>
      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
        {projectMembers.map((projectMember, index) => (
          <h1 key={index} className="border-b-2 border-black w-full">
            <div className="flex justify-between">
              <div className="flex">
                <h1>{projectMember.username}</h1>
                <span className="ml-6 mr-2 font-bold">Role:</span>
                <h1>{projectMember.role}</h1>
              </div>
              <div className="flex">
                <div className="ml-auto flex space-x-4">
                  <Link
                    to={`/viewReports/${projectName}/${projectMember.username}`}
                  >
                    <h1 className="underline cursor-pointer font-bold">
                      View Reports
                    </h1>
                  </Link>
                  <Link
                    to={`/changeRole/${projectName}/${projectMember.username}`}
                  >
                    <h1 className="underline cursor-pointer font-bold">
                      Change Role
                    </h1>
                  </Link>
                </div>
              </div>
            </div>
          </h1>
        ))}
      </div>
    </>
  );
}

export default ProjectMembers;