import { Card, Stack } from "react-bootstrap";
import { useLocation } from "react-router-dom";
import useFetchFromEndpoint from "../hooks/useFetchFromEndpoint";
import FacultyReportMenu from "../components/FacultyReport/FacultyReportMenu";

const FacultyPage = () => {
  const location = useLocation();
  const username = location.state.username;
  const token = location.state.token;

  const [facultyResponse, facultyStatus] = useFetchFromEndpoint(
    `/faculty/${username}/`,
    token
  );

  const [isAreaCoordinator, acResponseStatus] = useFetchFromEndpoint(
    `/faculty/${username}/is_area_coordinator/`,
    token
  );

  // const currentYear = new Date().getFullYear();
  // let currentMonth = new Date().getMonth() + 1;
  // currentMonth =
  //   currentMonth <= 5 ? 1 : currentMonth > 5 && currentMonth <= 8 ? 5 : 8;
  // const [currentSections, sectionStatus] = useFetchFromEndpoint(
  //   `/faculty/${username}/get_sections/${currentYear}/1`,
  //   token
  // );

  let pageRender = <></>;

  facultyResponse ? (
    (pageRender = (
      <Stack gap={5}>
        <Card body className="mt-4">
          <Stack
            direction="horizontal"
            gap={5}
            className="justify-content-center"
          >
            <h4>
              <strong>{facultyResponse.user.pid}</strong>
            </h4>
            <div className="vr"></div>
            <h2>
              <strong>{`${facultyResponse.user.first_name} ${facultyResponse.user.last_name}`}</strong>
            </h2>
            <div className="vr"></div>
            <h4>
              <strong>{`${facultyResponse.role}`}</strong>
            </h4>
          </Stack>
        </Card>

        <FacultyReportMenu username={username} token={token} areaCoordinator={isAreaCoordinator} />
      </Stack>
    ))
  ) : (
    <></>
  );

  return pageRender;
};

export default FacultyPage;
