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

/**
 * Renders the component for editing a weekly report.
 * @returns JSX.Element
 */

//This component does not yet work as intended. It is supposed to display the weekly report of a user in a project.
export default function GetOtherUsersReport(): JSX.Element {
  const [week, setWeek] = useState(0);
  const [developmentTime, setDevelopmentTime] = useState(0);
  const [meetingTime, setMeetingTime] = useState(0);
  const [adminTime, setAdminTime] = useState(0);
  const [ownWorkTime, setOwnWorkTime] = useState(0);
  const [studyTime, setStudyTime] = useState(0);
  const [testingTime, setTestingTime] = useState(0);
  const [reportId, setReportId] = useState(0);

  const token = localStorage.getItem("accessToken") ?? "";
  const { projectName } = useParams();
  const { username } = useParams();
  const { fetchedWeek } = useParams();

  useEffect(() => {
    const fetchUsersWeeklyReport = async (): Promise<void> => {
      const response = await api.getWeeklyReport(
        projectName ?? "",
        fetchedWeek?.toString() ?? "0",
        token,
      );

      if (response.success) {
        const report: WeeklyReport = response.data ?? {
          reportId: 0,
          userId: 0,
          projectId: 0,
          week: 0,
          developmentTime: 0,
          meetingTime: 0,
          adminTime: 0,
          ownWorkTime: 0,
          studyTime: 0,
          testingTime: 0,
        };
        setReportId(report.reportId);
        setWeek(report.week);
        setDevelopmentTime(report.developmentTime);
        setMeetingTime(report.meetingTime);
        setAdminTime(report.adminTime);
        setOwnWorkTime(report.ownWorkTime);
        setStudyTime(report.studyTime);
        setTestingTime(report.testingTime);
      } else {
        console.error("Failed to fetch weekly report:", response.message);
      }
    };

    void fetchUsersWeeklyReport();
  });

  const handleSignWeeklyReport = async (): Promise<void> => {
    await api.signReport(reportId, token);
  };

  const navigate = useNavigate();

  return (
    <>
      <h1 className="text-[30px] font-bold">
        {" "}
        UserId: {username}&apos;s Report
      </h1>
      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            void handleSignWeeklyReport();
            alert("Report successfully signed!");
            navigate(-1);
          }}
        >
          <div className="flex flex-col items-center">
            <div className="flex flex-col w-1/2 border-b-2 border-black items-center justify-center">
              <h1 className="font-bold text-[30px]"> Week: {week}</h1>
            </div>

            <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
              <thead>
                <tr>
                  <th className="w-1/2 py-2 border-b-2 border-black">
                    Activity
                  </th>
                  <th className="w-1/2 py-2 border-b-2 border-black">
                    Total Time (min)
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-black">
                <tr className="h-[10vh]">
                  <td>Development</td>
                  <td>
                    <input
                      type="text"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      defaultValue={
                        developmentTime === 0 ? "" : developmentTime
                      }
                      readOnly
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Meeting</td>
                  <td>
                    <input
                      type="text"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      defaultValue={meetingTime === 0 ? "" : meetingTime}
                      readOnly
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Administration</td>
                  <td>
                    <input
                      type="text"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      defaultValue={adminTime === 0 ? "" : adminTime}
                      readOnly
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Own Work</td>
                  <td>
                    <input
                      type="text"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      defaultValue={ownWorkTime === 0 ? "" : ownWorkTime}
                      readOnly
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Studies</td>
                  <td>
                    <input
                      type="text"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      defaultValue={studyTime === 0 ? "" : studyTime}
                      readOnly
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Testing</td>
                  <td>
                    <input
                      type="text"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      defaultValue={testingTime === 0 ? "" : testingTime}
                      readOnly
                    />
                  </td>
                </tr>
              </tbody>
            </table>
            <Button
              text="Sign Report"
              onClick={(): void => {
                return;
              }}
              type="submit"
            />
          </div>
        </form>
      </div>
    </>
  );
}
