import React, { useEffect } from "react";
import HeaderCardsSection from "../../../Components/EduClass/SingleEduClassHeaderSection";
import DeleteModalForm from "../Model/Delete";
import SendNotificationModalForm from "../show/model/SendNotificationEduClassModel";

import ActiveTabs from "./ActiveTable";
import { useParams } from "react-router-dom";
import { useGetAllEduClass } from "../../../api/eduClass";
import { usePage_titleState } from "../../../zustand/PageTitleState";

const Page = () => {
  const { edu_class_id } = useParams();
  const { data: edu_class } = useGetAllEduClass({
    show: edu_class_id,
  });
  const edu_class_name = edu_class?.data?.name || "";
  const course_name = edu_class?.data?.course?.name || "";
  const course_and_edu_class_name =
    " " + course_name + " ( " + edu_class_name + " )";
  const { set_title } = usePage_titleState();
  useEffect(() => {
    set_title(course_and_edu_class_name);
  }, [course_and_edu_class_name, set_title]);

  return (
    <div className="EduClass">
      <HeaderCardsSection />
      <ActiveTabs />
      <DeleteModalForm />
      <SendNotificationModalForm />
    </div>
  );
};

export default Page;
