
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import Actions from "../../Components/Ui/tables/Actions";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
import { useNavigate } from "react-router-dom";
import {  useUpdateUsers } from "../../api/users";
import { Switch } from "antd";
import { MdEmail } from "react-icons/md";
import { toast } from "react-toastify";


const useTableColumns: any = () => {
  const [t] = useTranslation();
  const navigate = useNavigate()

  const { mutate: update_status } = useUpdateUsers("put")
  const onChange = (checked: boolean, row: any) => {
    console.log(`switch to ${checked}`)
    if(row.type === "user"){
   
      update_status({
        id: row.id,
        status: checked ? "active" : "suspended"
  
      })
    }else{
      toast.error("sorry_only_user_can_change_his_status")
    }
 

  };


  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("avatar"),
        sortable: false,
        center: "true",
        cell: (row: any) => {
          let str = row?.avatar;
          str = str?.replace(`public`, "/storage") ?? "";
          return <ColumnsImage src={str} />
        }

      },
      {
        name: t("name"),
        sortable: false,
        center: "true",
        cell: (row: any) => row?.name
      },
      {
        name: t("email"),
        sortable: false,
        center: "true",
        cell: (row: any) => row?.email
      },
      {
        name: t("type"),
        sortable: false,
        center: "true",
        cell: (row: any) => row?.type
      },
      {
        name: t("status"),
        sortable: false,
        center: "true",
        cell: (row: any) => {
          let status = row?.status;
          return <Switch checked={status === "active"} onChange={(value: any) => onChange(value, row)} />;

        }

      },

      {
        name: "#",
        sortable: false,
        center: true,
        cell: (row: any) => (
          <Actions
            objectToEdit={row}
            showEdit={row.type === "user" ?false : true}
            onEdit={() => navigate(`/admin/${row.id}`)}
            showView={false}
            // onDelete={() => deleteMutation.mutate({ id: row.id })}
            showDelete={false}
          >
            <MdEmail onClick={() => navigate(`/users/${row.id}`)} className="cursor-pointer m-2" size={25} />

          </Actions>
        ),
      },

    ],
    []
  );
};

export default useTableColumns;

