import { Space, TableColumnsType, Tooltip } from "antd";
import { FaCheck } from "react-icons/fa";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";

import { StudentStatusEnum } from "../../../enums/Items";
import dayjs from "dayjs";
import { MdOutlineEdit } from "react-icons/md";
import { useTranslation } from "react-i18next";
import { hasAbility } from "../../../utils/hasAbility";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../enums/abilities";

export const useColumns = () => {
  const { handel_open_model } = useModalHandler();
  const { set_object_to_edit, set_old_object_to_edit } = useObjectToEdit(
    (state) => state,
  );

  const can_update_status =
    hasAbility(ABILITIES_ENUM.EARLY_DEPARTURE, ABILITIES_VALUES_ENUM.UPDATE) &&
    hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.UPDATE) &&
    hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.UPDATE);

  const can_add_status =
    hasAbility(ABILITIES_ENUM.EARLY_DEPARTURE, ABILITIES_VALUES_ENUM.STORE) &&
    hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.STORE) &&
    hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.STORE);

  const handleEdit = (record: any) => {
    // set_object_to_edit({...record,status:type});e

    const absence = record?.absence?.length > 0;
    const lateArrival = record?.lateArrival?.length > 0;
    const earlyDeparture =
      record?.[StudentStatusEnum?.EARLY_DEPARTURE]?.length > 0;

    const state = absence
      ? StudentStatusEnum?.ABSENCE
      : lateArrival
        ? StudentStatusEnum?.LATE_ARRIVAL
        : earlyDeparture
          ? StudentStatusEnum?.EARLY_DEPARTURE
          : StudentStatusEnum?.PRESENCE;

    handel_open_model(ModalEnum?.STUDENT_STATUS_EDIT);

    set_object_to_edit({ ...record, status: state });
    set_old_object_to_edit({ ...record, status: state });
  };
  const [t] = useTranslation();

  const columns: TableColumnsType<any> = [
    {
      title: t("columns.date"),
      dataIndex: "date",
      key: "date",
      align: "center",
      render: (text, record) => {
        const dateString =
          typeof record?.date === "string"
            ? record?.date
            : dayjs(record?.date).format("YYYY-MM-DD");

        return dateString;
      },
    },

    {
      title: t("columns.presence"),
      dataIndex: "date",
      key: "date",
      align: "center",
      render: (text, record, index) => {
        const presence =
          record?.[StudentStatusEnum?.ABSENCE]?.length > 0 ||
          record?.[StudentStatusEnum?.EARLY_DEPARTURE]?.length > 0 ||
          record?.[StudentStatusEnum?.LATE_ARRIVAL]?.length > 0;

        if (presence === false) {
          return (
            <div className={`presence_student column_studentBlock`}>
              <FaCheck />
            </div>
          );
        } else {
          return (
            <div className={`not_presence_student column_studentBlock`}></div>
          );
        }
      },
    },
    {
      title: t("columns.absence"),
      dataIndex: "date",
      key: "date",
      align: "center",
      render: (text, record, index) => {
        const absence = record?.[StudentStatusEnum?.ABSENCE]?.length > 0;

        if (absence) {
          return (
            <div className={`absence_student column_studentBlock`}>
              <FaCheck />
            </div>
          );
        } else {
          return (
            <div className={`not_absence_student column_studentBlock`}></div>
          );
        }
      },
    },
    {
      title: t("columns.earlyDeparture"),
      dataIndex: "date",
      key: "date",
      align: "center",
      render: (text, record, index) => {
        const earlyDeparture =
          record?.[StudentStatusEnum?.EARLY_DEPARTURE]?.length > 0;

        if (earlyDeparture) {
          return (
            <div className={`earlyDeparture_student column_studentBlock`}>
              <FaCheck />
            </div>
          );
        } else {
          return (
            <div
              className={`not_earlyDeparture_student column_studentBlock`}
            ></div>
          );
        }
      },
    },
    {
      title: t("columns.lateArrival"),
      dataIndex: "date",
      key: "date",
      align: "center",
      render: (text, record, index) => {
        const lateArrival =
          record?.[StudentStatusEnum?.LATE_ARRIVAL]?.length > 0;

        if (lateArrival) {
          return (
            <div className={`lateArrival_student column_studentBlock`}>
              <FaCheck />
            </div>
          );
        } else {
          return (
            <div
              className={`not_lateArrival_student column_studentBlock`}
            ></div>
          );
        }
      },
    },
    {
      title: "#",
      key: "actions",
      align: "end",
      className: "custom_add_button_column",
      render: (text, record, index) => {
        const className =
          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";

        return (
          <Space size="middle" className={className}>
            {can_update_status && can_add_status && (
              <Tooltip
                placement="top"
                title={t("practical.edit")}
                color="#E0E0E0"
              >
                <span onClick={() => handleEdit(record)}>
                <MdOutlineEdit
                  size={22}
                  style={{ color: "#A098AE" }}
                  
                />
                </span>
              </Tooltip>
            )}
          </Space>
        );
      },
    },
  ];

  return columns;
};
