import Table from "./TablePage";
import EditMarkModel from "./Model/EditModel";

import AddExamModel from "./Exam/Model/AddModel";

import AddMarkModel from "./Model/AddModel";
import DeleteMarkModel from "./Model/Delete";
import DeleteExamModel from "./Exam/Model/Delete";

import FillterNavWithRadio from "./FillterNavWithRadio";
import Body from "./Body";
import { ExamStatusEnum } from "../../../../../enums/Items";
import CustomSelect from "./Select/CustomSelect";
import SearchField from "../../../../../Components/DataTable/SearchField";
import { useMarkState } from "../../../../../zustand/MarkState";
import { Exam } from "../../../../../types/Item";
import { useTranslation } from "react-i18next";

const TableHeader = () => {
  const { HeaderData } = useMarkState();
  const { max_grade, total_student_count, subject } =
    HeaderData ?? ({} as Exam);
  console.log(HeaderData);

  const [t] = useTranslation();
  const OptionsType = [
    {
      value: ExamStatusEnum?.TAKEN,
      label: t("select.Exam.Taken"),
    },
    {
      label: t("select.Exam.Not_Taken"),

      value: ExamStatusEnum?.NOT_TAKEN,
    },
    {
      value: "",
      label: t("select.Exam.all_student"),
    },
  ];

  return (
    <div className="TableWithHeader">
      <FillterNavWithRadio />

      <div className="Marks_Body">
        <Body />
        <div className="In_Mark_Table">
          <header className="In_Mark_Table_Header_Info">
            <div>
              {" "}
              <h6> {t("header.subject")} </h6> : <h5> {subject?.name} </h5>{" "}
            </div>
            <div>
              {" "}
              <h6> {t("header.max_grade")} </h6> : <h5> {max_grade} </h5>{" "}
            </div>
            <div>
              {" "}
              <h6> {t("header.student_count")} </h6> :{" "}
              <h5> {total_student_count} </h5>{" "}
            </div>

            <div> </div>
          </header>
          <header className="In_Mark_Table_Header_Select">
            <SearchField
              searchBy="student_name_marks"
              placeholder="practical.search_here"
            />

            <CustomSelect
              options={OptionsType}
              placeholder={t("select.Exam.all_student")}
              searchBy="type"
            />
          </header>
          <Table />
        </div>
      </div>

      <AddMarkModel />
      <AddExamModel />

      <EditMarkModel />
      <DeleteMarkModel />
      <DeleteExamModel />
    </div>
  );
};

export default TableHeader;
