import React, { useEffect } from "react";
import Image from "../../../Components/Ui/Image";
import { MdChair, MdOutlineEdit } from "react-icons/md";
import { useNavigate } from "react-router-dom";
import { Student } from "../../../types/Item";
import { FaMapLocation, FaPeopleGroup } from "react-icons/fa6";
import { RiTimerFlashLine } from "react-icons/ri";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";
// import useSetPage_title from "../../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../../utils/hasAbility";

export default function StudentCard({ data }: any) {
  const { set_object_to_edit } = useObjectToEdit();
  const [t] = useTranslation();
  // useSetPage_title(
  //   `${t(ABILITIES_ENUM?.MAIN_PAGE)}  / ${t(`header.student_card`)}`,
  // );

  useEffect(() => {
    set_object_to_edit(data);
  }, [data, set_object_to_edit]);
  const userData: Student | {} = data?.data ?? {};

  const { image, full_name, user, nationality, birthday, edu_class, course } =
    userData as Student;

  interface UserInfo {
    icon: JSX.Element;
    label: string;
    value: string;
  }

  const userInfo: UserInfo[] = [
    {
      icon: <MdChair />,
      label: t("array.UserInfo.course"),
      value: course?.name,
    },
    {
      icon: <FaPeopleGroup />,
      label: t("array.UserInfo.education_class"),
      value: edu_class?.name,
    },
    {
      icon: <FaMapLocation />,
      label: t("array.UserInfo.nationality"),
      value: nationality,
    },
    {
      icon: <RiTimerFlashLine />,
      label: t("array.UserInfo.birthday"),
      value: birthday,
    },
  ];
  const navigate = useNavigate();
  const handelNavigate = () => {
    navigate("edit");
  };

  const can_can_edit_student = hasAbility(
    ABILITIES_ENUM.STUDENT,
    ABILITIES_VALUES_ENUM.UPDATE,
  );

  return (
    <div className="StudentCard">
      <main>
        <div>
          <Image src={image} />
          <h1>{full_name}</h1>
          <h6>{user?.username}</h6>
        </div>
        <span>
          <div>
            {can_can_edit_student && <MdOutlineEdit onClick={handelNavigate} />}
          </div>
        </span>
      </main>
      <footer>
        <div className="FooterDetailsCards">
          {userInfo.map(
            (info, index) =>
              info.value && (
                <div key={index} className="FooterDetailsCard">
                  <h5>{info.label}</h5>
                  <span>
                    <div>{info.icon}</div>
                    <h6>{info.value}</h6>
                  </span>
                </div>
              ),
          )}
        </div>
      </footer>
    </div>
  );
}
