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

function fnDelete(props: any) {}

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

  return useMemo(
    () => [
      {
        name: t("key"),
        sortable: false,
        center: "true",
        cell: (row: any) => row?.key,
      },
      {
        name: t("value"),
        sortable: false,
        center: "true",
        cell: (row: any) => {
          if (row?.value_type === 'image') {
            return <ColumnsImage src={row?.value} />;
          } else if (typeof row?.value === 'string') {
            const words = row.value.split(' ');
            const firstTenWords = words.slice(0, 10).join(' ');
            const result = words.length > 10 ? firstTenWords + '...' : firstTenWords;
            return result;
          } else {
            return row.value;
          }
        },
      },
      {
        name: t("value_type"),
        sortable: false,
        center: "true",
        cell: (row: any) => row?.value_type,
      },
      {
        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}
            showDelete={false}
            showView={false}
            onDelete={() => deleteMutation.mutate({ id: row.id })}
          />
        ),
      },
    ],
    [t]
  );
};

export default useTableColumns;