import React, { useEffect } from "react";
import Order_Details_Card from "../order_details_card/Order_Details_Card";
import { useDispatch, useSelector } from "react-redux";
import {
  getAllCancelOrder,
  getAllOrder,
} from "../../../../features/order/orderSlice";
import { encodeId } from "../../../../utils/common";
import NoData from "../../../Animation/no_data/NoData";

const Cancelled = () => {


  const dispatch = useDispatch();
  const order = useSelector((state) => state.order.allCancelOrders);

  useEffect(() => {
    const statusIds = [11];
    dispatch(getAllCancelOrder({ order_status_id: statusIds }));
  }, [dispatch]);

  return (
    <section className="Cancelled Ordered">
      {order?.data?.map((item, index) => {
        return (
          <Order_Details_Card
            data={item}
            baseLike={`/cancel-order-details/${encodeId(item?.id)}?type=Cancel`}
            key={index}
          />
        );
      })}
      {order?.data?.length === 0 && (
        <div className="lottie_div">
          <NoData />
        </div>
      )}
      <div className="no_data_main_div">
        <p className="no_data_text">No more orders to show</p>
      </div>
    </section>
  );
};

export default Cancelled;
