import { useEffect, useState } from "react";
import { Stack } from "react-bootstrap";
import { fetchFromEndpoint } from "../../api/fetchFromEndpoint";
import CourseOutcomesReport from "./CourseOutcomesReport";
import GenQuestionsReport from "./GenQuestionsReport";
import MajorQuestionsReport from "./MajorQuestionsReport";

const FacultyReportChart = ({ year, course, month, reference, isAreaCoordinator, saDegree, saYear, saSemester, saCourse, username, token }) => {
  const [responsesByFilter, setResponsesByFilter] = useState(null);

  // get responses by selected filter
  useEffect(() => {
    const trySetResponsesBySelectedFilter = async () => {
      if (isAreaCoordinator) {
        // year responses
        if (saYear !== "Year" && saSemester === "Semester" && saCourse === "Course")
          await fetchFromEndpoint(`/faculty/${username}/subject_area_year_responses/${saYear}/${saDegree}/`, token)
            .then(response => response.json())
            .then(data => setResponsesByFilter(data));
        // by semester
        else if (saYear !== "Year" && saSemester !== "Semester" && saCourse === "Course")
          await fetchFromEndpoint(`/faculty/${username}/subject_area_semester_responses/${saYear}/${saSemester}/${saDegree}/`, token)
            .then(response => response.json())
            .then(data => setResponsesByFilter(data));

        // by course ref
        else if (saYear !== "Year" && saSemester !== "Semester" && saCourse !== "Course")
          await fetchFromEndpoint(`/faculty/${username}/subject_area_individual_responses/${saYear}/${saSemester}/${saDegree}/`, token)
            .then(response => response.json())
            .then(data => setResponsesByFilter(data));
      }

      else {
        // get individual responses (with reference)
        if (year !== "" && course !== "" && month !== "All Semesters" && reference !== "All Sections") {
          // get responses
          // extract reference
          let regex = /^[^\s]*/gm;
          const ref = reference.match(regex)[0];
          await fetchFromEndpoint(`/faculty/${username}/view_individual_responses/${ref}/${year}/${month}/`, token)
            .then(response => response.json())
            .then(data => setResponsesByFilter(data));
        }

        // yearly report
        if (month === "All Semesters" && reference === "All Sections") {
          await fetchFromEndpoint(`/faculty/${username}/view_annual_responses/${year}/${course}/`, token)
            .then(response => response.json())
            .then(data => setResponsesByFilter(data));
        }
      }
    };

    if (username && token) trySetResponsesBySelectedFilter();
  }, [year, course, month, reference, username, token, isAreaCoordinator, saCourse, saDegree, saSemester, saYear]);

  let genQuestionsRender = responsesByFilter ? <GenQuestionsReport responsesByFilter={responsesByFilter} token={token} /> : <></>
  let csQuestionsRender = responsesByFilter ? <CourseOutcomesReport responsesByFilter={responsesByFilter} course={course} token={token} /> : <></>
  let majorQuestionsRender = responsesByFilter ? <MajorQuestionsReport responsesByFilter={responsesByFilter} token={token} /> : <></>

  return (
    <Stack gap={5}>
      {genQuestionsRender}
      {csQuestionsRender}
      {majorQuestionsRender}
    </Stack>
  );
};

export default FacultyReportChart;
