import React from "react";
import MoneyState from "../../../Components/Student/activity/MoneyState";
import StudentsTime from "../../../Components/activity/StudentsTime";
import StudentBehavior from "../../../Components/activity/StudentBehavior";
// import TablePage from "./DataTable/TablePage";
import Nav from "./Nav";
import StudentCard from "./StudentCard";
// import Delete from "./model/Delete";
import Notification from "./model/SendNotificationCourseModel";
import { useGetStudent } from "../../../api/student";
import { useParams } from "react-router-dom";
import { Spin } from "antd";
import { hasAbility } from "../../../utils/hasAbility";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";

const Page = () => {
  const { student_id } = useParams();

  const { data, isLoading } = useGetStudent({
    show: student_id,
  });
  const can_index_note = hasAbility(
    ABILITIES_ENUM.NOTE,
    ABILITIES_VALUES_ENUM.INDEX,
  );
  const can_index_status =
    hasAbility(ABILITIES_ENUM.EARLY_DEPARTURE, ABILITIES_VALUES_ENUM.INDEX) &&
    hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.INDEX) &&
    hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.INDEX) &&
    hasAbility(ABILITIES_ENUM.PRESENCE, ABILITIES_VALUES_ENUM.INDEX);

  console.log(can_index_status, "can_index_status");

  const can_index_payment = hasAbility(
    ABILITIES_ENUM.PAYMENT,
    ABILITIES_VALUES_ENUM.INDEX,
  );

  if (isLoading) {
    return <Spin />;
  }
  return (
    <div className="activity_page">
      <div className="big_section">
        <Nav />
        <StudentCard data={data} />
        <div className="TowItem">
          {can_index_status && <StudentsTime />}

          {can_index_note && <StudentBehavior />}
        </div>
        {/* <TablePage /> */}
      </div>
      <div className="small_section">{can_index_payment && <MoneyState />}</div>
      {/* <Delete /> */}
      <Notification />
    </div>
  );
};

export default Page;
