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

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

  const navigate = useNavigate();
  const { set_object_to_edit } = useObjectToEdit((state) => state);
  const [t] = useTranslation();
  const can_edit_early_departure = hasAbility(
    ABILITIES_ENUM.EARLY_DEPARTURE,
    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.father_name,
    },

    {
      title: t("columns.presence"),
      dataIndex: "id",
      key: "id",
      align: "center",
      hidden: !can_edit_early_departure,
      render: (text, record, index) => {
        const EARLY_DEPARTURE =
          record?.[StudentStatusEnum?.EARLY_DEPARTURE] ?? false;
        const state = EARLY_DEPARTURE
          ? StudentStatusEnum?.EARLY_DEPARTURE
          : StudentStatusEnum?.PRESENCE;
        // console.log(state,"state");

        // console.log(record);

        const handel_edit = () => {
          set_object_to_edit({ ...record, status: state });
          handel_open_model(ModalEnum?.EARLY_DEPARTURE_EDIT);
        };

        return (
          <div className={`${state + `_Details`}`}>
            {state === StudentStatusEnum?.EARLY_DEPARTURE ? (
              <div onClick={handel_edit} className="Column_see_more_details">
                {t("header.see_more_details")}
              </div>
            ) : (
              <FaPlus color="#A098AE" onClick={handel_edit} size={20} />
            )}
          </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;
};
