
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import Actions from "../../Components/Ui/tables/Actions";
import { HovarableImage } from "../../Components/Ui";
import { BaseURL } from "../../api/config";
import { ToggleStatus } from "../../Components/Ui/ToggleStatus";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
import LoadingSpinner from "../../Components/Ui/LoadingSpinner";
import { Switch } from "antd";
import { mapTranslatedProperties } from "../../utils/language/mapTranslatedProperties";
// import { useDeleteProduct, useUpdateProductStatus } from "../../api/owner_products";
import { useNavigate } from "react-router-dom";
import { useDeleteProduct, useUpdateProductStatus } from "../../api/product";


const useTableColumns :any = () => {
  const [t] = useTranslation();
  const toggleMutation = useUpdateProductStatus();
  const deleteMutation = useDeleteProduct();

  const navigate  = useNavigate()
  const handleChange = (row:any)=> {
    const status = row?.favorite ;  
    toggleMutation.mutate({id:row?.id,new_status:status})
      
  }
  const language = localStorage.getItem("language") ?? "en"

  return useMemo(
    () => [
      {
        name: t("id"),
        sortable: true, // Enable sorting for id column
        center: true,
        selector: (row: any) => row.id, // Specify selector function for sorting
      },      {
        name: t("name"),
        sortable: false,
        center: true,
        selector:(row:any) => row?.name?.[language],

      },
      {
        name: t("product_count"),
        sortable: false,
        center: true,
        selector:(row:any) => row?.product_count,

      },
      
      {
        name: t("category"),
        sortable: false,
        center: true,
        cell: (row:any) => (
          row?.category?.name?.[language]
        ),
      },
     
      // {
      //   name: t("favorite"),
      //   sortable: false,
      //   center: true,
      //   cell: (row:any) => (
      //     <ToggleStatus handleSwitch={handleChange} object={row} toggleMutation={toggleMutation} />
      //   ),
      // },
      {
        name: "#",
        sortable: false,
        center: "true",
        cell: (row:any) => (
            <Actions
              onEdit={()=> navigate('/products/'+row.id)}
              objectToEdit={row}
              showEdit={true}
              showView={false}
              onDelete={() => deleteMutation.mutate({ id: row.id })}
              />
        ),
      },
    ],
    [t]
  );
};

export default useTableColumns;

