import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { api } from "../API/API";
import { WeeklyReport } from "../Types/goTypes";

/**
 * Renders a component that displays the projects a user is a part of and links to the projects start-page.
 * @returns The JSX element representing the component.
 */
function DisplayUserProject(): JSX.Element {
  const { projectName } = useParams();
  const [unsignedReports, setUnsignedReports] = useState<WeeklyReport[]>([]);
  //const navigate = useNavigate();
  useEffect(() => {
    const getUnsignedReports = async (): Promise<void> => {
      const token = localStorage.getItem("accessToken") ?? "";
      const response = await api.getUnsignedReportsInProject(
        projectName ?? "",
        token,
      );
      console.log(response);
      if (response.success) {
        setUnsignedReports(response.data ?? []);
      } else {
        console.error(response.message);
      }
    };

    void getUnsignedReports();
  }, [projectName]); // Include 'projectName' in the dependency array

  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">
        All Unsigned Reports In: {projectName}{" "}
      </h1>
      <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]">
        {unsignedReports.map((unsignedReport: WeeklyReport, index: number) => (
          <h1 key={index} className="border-b-2 border-black w-full">
            <div className="flex justify-between">
              <div className="flex">
                <span className="ml-6 mr-2 font-bold">UserID:</span>
                <h1>{unsignedReport.userId}</h1>
                <span className="ml-6 mr-2 font-bold">Week:</span>
                <h1>{unsignedReport.week}</h1>
                <span className="ml-6 mr-2 font-bold">Total Time:</span>
                <h1>
                  {unsignedReport.developmentTime +
                    unsignedReport.meetingTime +
                    unsignedReport.adminTime +
                    unsignedReport.ownWorkTime +
                    unsignedReport.studyTime +
                    unsignedReport.testingTime}
                </h1>
                <span className="ml-6 mr-2 font-bold">Signed:</span>
                <h1>NO</h1>
              </div>
              <div className="flex">
                <div className="ml-auto flex space-x-4">
                  <Link
                    to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.userId}/${unsignedReport.week}`}
                  >
                    <h1 className="underline cursor-pointer font-bold">
                      View Report
                    </h1>
                  </Link>
                </div>
              </div>
            </div>
          </h1>
        ))}
      </div>
    </>
  );
}

export default DisplayUserProject;