import { TableColumnsType } from "antd";
import { Sales } from "../../../types/Item";
import { useTranslation } from "react-i18next";
import { LuArrowUpDown } from "react-icons/lu";
import { useState } from "react";
import { useFilterStateState } from "../../../zustand/Filter";

export const useColumns = () => {
  const [t] = useTranslation();
  const [isDesc,setIsDesc] = useState(true)
  const {Filter,setFilter} = useFilterStateState()

  const handleClickReorder = (key:string) =>{
    setFilter({
      ...Filter,
      reOrderKey:key,
      reOrderValue:isDesc ? "desc":"asc"
    })
    setIsDesc(!isDesc)
  }

  const columns: TableColumnsType<Sales> = [
    // {
    //   title: t("columns.id"),
    //   dataIndex: "id",
    //   key: "id",
    //   align: "center",
    // },
    {
      title:<div> <LuArrowUpDown className="reorderIcon" onClick={() =>handleClickReorder("sortName")}/> {t("columns.student_full_name")}  </div>,
      key: "student_full_name",
      align: "center",
      render: (row) => {
        return row?.student?.first_name + " " + row?.student?.last_name;
      },
    },
    {
      title: t("columns.the_package"),
      render: (row) => {
        return row?.package?.name;
      },
      key: "package",
      align: "center",
    },
    {
      title: t("columns.paid_price"),
      render: (row) => {
        return row?.package?.price;
      },
      key: "price",
      align: "center",
    },
    {
      title:<div> <LuArrowUpDown className="reorderIcon" onClick={() =>handleClickReorder("sortDate")}/> {t("columns.activation_date")}  </div> ,
      dataIndex: "activation_date",
      key: "activation_date",
      align: "center",
    },
    {
      title: t("columns.expiration_date"),
      dataIndex: "expiration_date",
      key: "expiration_date",
      align: "center",
    },
  ];

  return columns;
};
