import React from "react";
import { useButtonState } from "../../../zustand/ButtonState";
import Student from "./Tables/Student/TableHeader";
import Programme from "./Tables/programme/Page";
import Registration from "./Tables/registration/TableHeader";
import EarlyDeparture from "./Tables/earlyDeparture/TableHeader";
import HomeWork from "./Tables/homework/TableHeader";
import SessionContent from "./Tables/sessionContent/TableHeader";
import Note from "./Tables/Note/TableHeader";
import Payment from "./Tables/Payment/TableHeader";
import Mark from "./Tables/mark/TableHeader";
import { hasAbility } from "../../../utils/hasAbility";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";

export const EduClassComponents = [
  {
    id: 1,
    name: "Student_Records",
    component: <Student />,
    abilities: ABILITIES_ENUM?.STUDENT,
  },
  {
    id: 2,
    name: "Attendance",
    component: <Registration />,
    abilities: ABILITIES_ENUM?.ABSENCE,
  },
  {
    id: 3,
    name: "Permissions",
    component: <EarlyDeparture />,
    abilities: ABILITIES_ENUM?.EARLY_DEPARTURE,
  },
  {
    id: 4,
    name: "Grades",
    component: <Mark />,
    abilities: ABILITIES_ENUM?.MARK,
  },
  {
    id: 5,
    name: "Notes",
    component: <Note />,
    abilities: ABILITIES_ENUM?.NOTE,
  },
  {
    id: 6,
    name: "Financial_Status",
    component: <Payment />,
    abilities: ABILITIES_ENUM?.PAYMENT,
  },
  {
    id: 7,
    name: "Assignments",
    component: <HomeWork />,
    abilities: ABILITIES_ENUM?.HOMEWORK,
  },
  {
    id: 8,
    name: "Class_Schedule",
    component: <Programme />,
    abilities: ABILITIES_ENUM?.SESSION,
  },
  {
    id: 9,
    name: "Curriculum_Follow_up",
    component: <SessionContent />,
    abilities: ABILITIES_ENUM?.SESSION_CONTENT,
  },
];

const ActiveTabs = () => {
  const { ActiveTab } = useButtonState((state) => state);

  const filteredComponents = EduClassComponents?.filter((component) =>
    hasAbility(component.abilities, ABILITIES_VALUES_ENUM.INDEX),
  );

  const renderComponent = () => {
    const selectedComponent = filteredComponents[Number(ActiveTab)];

    return selectedComponent ? selectedComponent?.component : <></>;
  };

  return <div>{renderComponent()}</div>;
};

export default ActiveTabs;
