import React from "react";
import { useGetStudent } from "../../../api/student";
import { useParams } from "react-router-dom";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { Student } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../../utils/hasAbility";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";

const Nav = () => {
  const { student_id } = useParams();
  const { data } = useGetStudent({
    show: student_id,
  });
  const userData: Student | {} = data?.data ?? {};

  const { full_name } = userData as Student;

  const { handel_open_model } = useModalHandler();
  const { set_object_to_edit } = useObjectToEdit((state) => state);
  const [t] = useTranslation();
  const handleNotification = () => {
    set_object_to_edit(userData);
    handel_open_model(ModalEnum?.STUDENT_SENDNOTIFICATION);
  };
  const can_add_notification = hasAbility(
    ABILITIES_ENUM.NOTE,
    ABILITIES_VALUES_ENUM.STORE,
  );

  return (
    <div className="Nav">
      <header>
        {t("header.student_card")} <span>( {full_name} ) </span>
      </header>
      <div className="Buttons_over_width ">
        {/* <button onClick={() => handleDelete()}>حذف الطالب</button> */}
        {can_add_notification && (
          <button onClick={() => handleNotification()}>
            {t("practical.Send_Direct_Notification")}
          </button>
        )}
      </div>
    </div>
  );
};

export default Nav;
