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

function fnDelete(props :any ){}

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

  return useMemo(
    () => [
 
      {
        name: t("first_name"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.first_name
      },
      {
        name: t("last_name"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.last_name
      },
      {
        name: t("email"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.email
      },
      {
        
        name: t("country"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.country,
      },
      {
        name: t("phone_number"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.phone_number 
      },
      {
        name: t("message"),
        sortable: false,
        center: "true",
        cell: (row:any) => row?.message
      },
      // {
      //   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={false}
              showView={false}
              onDelete={() => deleteMutation.mutate({ id: row.id })}
            />
        ),
      },
    ],
    [t]
  );
};

export default useTableColumns;

