import { TableColumnsType } from "antd";
import { FaCheck, FaEye } from "react-icons/fa";
import { FaXmark } from "react-icons/fa6";
import useModalHandler from "../../../../../utils/useModalHandler";
import { ModalEnum } from "../../../../../enums/Model";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import { RiTimerFlashLine } from "react-icons/ri";
import { StudentStatusEnum } from "../../../../../enums/Items";
import { findLabelByValue } from "../../../../../utils/findLabelByValue";
import { Sex_Select_options_Student } from "../../../../../types/App";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../../../../utils/hasAbility";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../../../enums/abilities";
import { useNavigate } from "react-router-dom";

export const useColumns = () => {
  const { handel_open_model } = useModalHandler();

  const { set_object_to_edit, set_old_object_to_edit } = useObjectToEdit(
    (state) => state,
  );
  const navigate = useNavigate();
  const [t] = useTranslation();
  const can_edit_absence = hasAbility(
    ABILITIES_ENUM.ABSENCE,
    ABILITIES_VALUES_ENUM.UPDATE,
  );
  const can_show_student = hasAbility(
    ABILITIES_ENUM.STUDENT,
    ABILITIES_VALUES_ENUM.SHOW,
  );

  const columns: TableColumnsType<any> = [
    {
      title: t("columns.id"),
      dataIndex: "user_id",
      key: "user_id",
      align: "center",
      render: (text, record) => record?.student.user_id,
    },
    {
      title: t("columns.name"),
      dataIndex: "first_name",
      key: "first_name",
      align: "center",
      render: (text, record) => record?.student.first_name,
    },
    {
      title: t("columns.sex"),
      dataIndex: "sex",
      key: "sex",
      align: "center",
      render: (text, record) => {
        const value = findLabelByValue(
          Sex_Select_options_Student,
          record?.student?.sex,
        );
        return <>{t(`${value}`)}</>;
      },
    },
    {
      title: t("columns.father_name"),
      dataIndex: "father_name",
      key: "father_name",
      align: "center",
      render: (text, record) => record?.student.father_name,
    },
    {
      title: t("columns.last_name"),
      dataIndex: "last_name",
      key: "last_name",
      align: "center",
      render: (text, record) => record?.student.last_name,
    },

    {
      title: t("columns.presence"),
      dataIndex: "presence",
      key: "presence",
      align: "center",
      hidden: !can_edit_absence,
      render: (text, record, index) => {
        const absence = record?.absence ?? false;
        const lateArrival = record?.lateArrival ?? false;
        const state = absence
          ? StudentStatusEnum?.ABSENCE
          : lateArrival
            ? StudentStatusEnum?.LATE_ARRIVAL
            : StudentStatusEnum?.PRESENCE;
        // console.log(record);

        const handel_edit = () => {
          set_object_to_edit({ ...record, status: state });
          set_old_object_to_edit({ ...record, status: state });
          handel_open_model(ModalEnum?.ABSENCE_EDIT);
        };
        return (
          <div className={`Color_type_checkbox ${state + `_icon`}`}>
            {state === StudentStatusEnum?.ABSENCE ? (
              <FaXmark onClick={handel_edit} size={13} />
            ) : state === StudentStatusEnum?.LATE_ARRIVAL ? (
              <RiTimerFlashLine onClick={handel_edit} size={13} />
            ) : (
              <FaCheck onClick={handel_edit} size={13} />
            )}
          </div>
        );
      },
    },

    {
      title: t("columns.birthday"),
      dataIndex: "birthday",
      key: "birthday",
      align: "center",
      render: (text, record, index) => {
        return (
          <>
            {record?.student?.birth_place} {record?.student?.birthday}
          </>
        );
      },
    },
    {
      title: t("columns.card"),
      key: "name",
      align: "center",
      className: "SeeMoreEyeColumn",
      hidden: !can_show_student,
      render: (text, record, index) => {
        const className =
          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";

        return (
          <div
            onClick={() => navigate(`/student/${record?.student?.id}`)}
            className={`SeeMoreEye ${className}`}
          >
            <FaEye />
          </div>
        );
      },
    },
  ];

  return columns;
};
