import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { api } from "../API/API";
import { projectTimes } from "./GetProjectTimes";

/**
 * Renders the component for showing total time per role in a project.
 * @returns JSX.Element
 */
export default function TimePerRole(): JSX.Element {
  const [development, setDevelopment] = useState<number>(0);
  const [meeting, setMeeting] = useState<number>(0);
  const [admin, setAdmin] = useState<number>(0);
  const [own_work, setOwnWork] = useState<number>(0);
  const [study, setStudy] = useState<number>(0);
  const [testing, setTesting] = useState<number>(0);
  const total = development + meeting + admin + own_work + study + testing;

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

  const fetchTimePerActivity = async (): Promise<void> => {
    const response = await api.getProjectTimes(projectName ?? "", token);
    {
      if (response.success) {
        const report: projectTimes = response.data ?? {
          development: 0,
          meeting: 0,
          admin: 0,
          own_work: 0,
          study: 0,
          testing: 0,
        };
        setDevelopment(report.development);
        setMeeting(report.meeting);
        setAdmin(report.admin);
        setOwnWork(report.own_work);
        setStudy(report.study);
        setTesting(report.testing);
      } else {
        console.error("Failed to fetch weekly report:", response.message);
      }
    }
  };

  useEffect(() => {
    void fetchTimePerActivity();
  });

  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">
        Total Time Per Activity For All Members In: {projectName}{" "}
      </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">
        <div className="flex flex-col items-center">
          <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="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={development}
                    readOnly
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Meeting</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={meeting}
                    readOnly
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Administration</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={admin}
                    readOnly
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Own Work</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={own_work}
                    readOnly
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Studies</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={study}
                    readOnly
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Testing</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={testing}
                    readOnly
                  />
                </td>
              </tr>
              <tr className="h-[10vh] font-bold font-">
                <td>In Total:</td>
                <td>
                  <h1>{total}</h1>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}