
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import Actions from "../../Components/Ui/tables/Actions";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
import { useDeleteServices } from "../../api/Services";


const useTableColumns :any = () => {
  const deleteMutation = useDeleteServices()
  const [t] = useTranslation();

  return useMemo(
    () => [
      {
        name: t("id"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.id
      },
      {
        name: t("title"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.title
      },
      {
        name: t("description"),
        sortable: false,
        center: "true",
        cell: (row: any) => {
            const words = row.description.split(' ');
            const firstTenWords = words.slice(0, 10).join(' ');
            const result = words.length > 10 ? firstTenWords + '...' : firstTenWords;
            return result;
        },
      },
      {
        name: t("image"),
        center: "true",
        cell: (row: any) => {
          return (
            <ColumnsImage src={row?.image} />
          )
        }
      },
      {
        name: "#",
        sortable: false,
        center: "true",
        cell: (row) => (
            <Actions
            // importnat to return the row in on Edit Function to store in objectToEdit That Upper in Edit Modal 
              onEdit={() => row}
              // onView={()=>{}}
              objectToEdit={row}
              showEdit={true}
              showView={false}
              // showDelete={false}
              onDelete={() => deleteMutation.mutate({ id: row.id })}
            />
        ),
      },
    ],
    [t]
  );
};

export default useTableColumns;

