import { Popover, TableColumnsType } from "antd";
import { Student } from "../../../../../types/Item";
import { FaEye } from "react-icons/fa";
import { FaEllipsisVertical } from "react-icons/fa6";
import { useNavigate, useParams } from "react-router-dom";
import { useDeleteRegistrationRecord } from "../../../../../api/registrationRecord";
import { useQueryClient } from "react-query";
import { useEffect } from "react";
import { findLabelByValue } from "../../../../../utils/findLabelByValue";
import { Sex_Select_options_Student } from "../../../../../types/App";
import { useTranslation } from "react-i18next";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../../../enums/abilities";
import { hasAbility } from "../../../../../utils/hasAbility";

export const useColumns = () => {
  const navigate = useNavigate();
  const { mutate, isSuccess } = useDeleteRegistrationRecord();
  const { edu_class_id } = useParams();
  const queryClient = useQueryClient();
  useEffect(() => {
    if (isSuccess) {
      queryClient.invalidateQueries(["student"]);
    }
  }, [isSuccess, queryClient]);
  const [t] = useTranslation();

  const can_show_student = hasAbility(
    ABILITIES_ENUM.STUDENT,
    ABILITIES_VALUES_ENUM.SHOW,
  );

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

    {
      title: t("columns.birthday"),
      dataIndex: "birthday",
      key: "birthday",
      align: "center",
      render: (text, record, index) => {
        return (
          <>
            {record?.birth_place} {record?.birthday}
          </>
        );
      },
    },
    {
      title: t("columns.card"),
      key: "name",
      align: "center",
      className: "SeeMoreEyeColumn",
      hidden: !can_show_student,
      render: (text, record, index) => {
        return (
          <div
            onClick={() => navigate(`/student/${record?.id}`)}
            className="SeeMoreEye"
          >
            <FaEye />
          </div>
        );
      },
    },
    {
      title: "",
      key: "actions",
      align: "center",

      render: (text, record, index) => {
        const handle_registered_student = (record: any) => {
          // console.log(record,"record");
          mutate({
            id: record?.id + "/" + Number(edu_class_id),
          });
        };

        const className =
          index % 2 === 0 ? "even-row buttonAction" : "odd-row buttonAction";

        const PopoverContent = (
          <div className="PopoverContent">
            <p onClick={() => handle_registered_student(record)}>
              {" "}
              {t("practical.cancel_registration")}{" "}
            </p>
          </div>
        );

        return (
          <div className={className}>
            <Popover
              content={PopoverContent}
              overlayClassName="Popover"
              arrow={false}
              placement="top"
            >
              <FaEllipsisVertical />
            </Popover>
          </div>
        );
      },
    },
  ];

  return columns;
};
