import { useTranslation } from "react-i18next";
import { useDeleteOrder } from "../../api/order";
import Actions from "../../Components/Ui/tables/Actions";
import { useNavigate } from "react-router-dom";
import { FaCheck, FaTimes, FaClock, FaBan } from 'react-icons/fa';

const useTableColumns = () => {
  const [t] = useTranslation();
  const navigate = useNavigate()
  const deleteMutation = useDeleteOrder()
  const language = localStorage.getItem("language") ?? "en"

   
    let column =  [
      {
        name: t("order_code"),
        sortable: false,
        center:true,
        selector:(row:any) => row?.id,
      },    
      {
        name: t("name"),
        sortable: false,
        center:true,
        selector:(row:any) => row?.user?.name,

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

      },

      {
        name: t("status"),
        center: true,
        width:"250",
        cell: (row: any) => {
          let status = row?.state;
          let icon;
      
          // Assigning an icon component based on the status
          switch (status) {
            case 'pending_approve':
              icon = <FaClock />;
              break;
            case 'approved':
              icon = <FaCheck />;
              break;
            case 'rejected':
              icon = <FaTimes />;
              break;
            case 'pending_cancellation':
              icon = <FaBan />;
              break;
            default:
              icon = null;
          }
      
          // Rendering the status with its corresponding icon
          return (
            <div className="orderStatus">
              {icon} {status}
            </div>
          );
        }
      },
      {
        name: t("total"),
        center: true,
        cell:(row:any)=>{
          
          return (row?.total)
        }
      },
      {
        name: "#",
        center: true,
        cell: (row:any) =>
            <span style={{display:"flex" , alignItems:"center" , justifyContent:"space-around" , width:"100px" }}   >
          
            <Actions
            showDelete={false}
            objectToEdit={row}
            onDelete={() => deleteMutation.mutate({order_id:row.id })}  
            showEdit={true}
            onView={()=>navigate(`/order/view/${row?.id}` , {replace:true})}
            onEdit={()=>navigate(`/order/${row?.id}` , {replace:true})}

            />
            
            </span>
          
          
      },

     
    
    
    ]


  
        
    
    return column 

};

export default useTableColumns;