//Info: This component is used to display all the time reports for a project. It will display the week number,
//total time spent, and if the report has been signed or not. The user can click on a report to edit it.
import { useEffect, useState } from "react";
import { NewWeeklyReport } from "../Types/goTypes";
import { Link, useParams } from "react-router-dom";

/**
 * Renders a component that displays all the time reports for a specific project.
 * @returns {JSX.Element} representing the component.
 */
function AllTimeReportsInProject(): JSX.Element {
  const { username } = useParams();
  const { projectName } = useParams();
  const [weeklyReports, setWeeklyReports] = useState<NewWeeklyReport[]>([]);

  /*   // Call getProjects when the component mounts
  useEffect(() => {
    const getWeeklyReports = async (): Promise<void> => {
      const token = localStorage.getItem("accessToken") ?? "";
      const response = await api.getWeeklyReportsForUser(
        projectName ?? "",
        token,
      );
      console.log(response);
      if (response.success) {
        setWeeklyReports(response.data ?? []);
      } else {
        console.error(response.message);
      }
    }; */
  // Mock data
  const getWeeklyReports = async (): Promise<void> => {
    // Simulate a delay
    await Promise.resolve();
    const mockWeeklyReports: NewWeeklyReport[] = [
      {
        projectName: "Project 1",
        week: 1,
        developmentTime: 10,
        meetingTime: 2,
        adminTime: 1,
        ownWorkTime: 3,
        studyTime: 4,
        testingTime: 5,
      },
      {
        projectName: "Project 1",
        week: 2,
        developmentTime: 8,
        meetingTime: 2,
        adminTime: 1,
        ownWorkTime: 3,
        studyTime: 4,
        testingTime: 5,
      },
      // Add more reports as needed
    ];

    // Use the mock data instead of the real data
    setWeeklyReports(mockWeeklyReports);
  };
  useEffect(() => {
    void getWeeklyReports();
  }, []);

  return (
    <>
      <h1 className="text-[30px] font-bold">{username}&apos;s Time Reports</h1>
      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[30px]">
        {weeklyReports.map((newWeeklyReport, index) => (
          <Link
            to={`/editOthersTR/${projectName}/${username}/${newWeeklyReport.week}`}
            key={index}
            className="border-b-2 border-black w-full"
          >
            <div className="flex justify-between">
              <h1>
                <span className="font-bold">{"Week: "}</span>
                {newWeeklyReport.week}
              </h1>
              <h1>
                <span className="font-bold">{"Total Time: "}</span>
                {newWeeklyReport.developmentTime +
                  newWeeklyReport.meetingTime +
                  newWeeklyReport.adminTime +
                  newWeeklyReport.ownWorkTime +
                  newWeeklyReport.studyTime +
                  newWeeklyReport.testingTime}{" "}
                min
              </h1>
              <h1>
                <span className="font-bold">{"Signed: "}</span>
                NO
              </h1>
            </div>
          </Link>
        ))}
      </div>
    </>
  );
}

export default AllTimeReportsInProject;