import React, { useEffect } from "react";

import Order_Details_Card from "../order_details_card/Order_Details_Card";
import { useDispatch, useSelector } from "react-redux";
import {
  getAllOrder,
  getAllReturnOrder,
} from "../../../../features/order/orderSlice";
import { encodeId } from "../../../../utils/common";
import { useRouter } from "next/navigation";
import SupermarketCart from "../../../Animation/supermarket-cart/SupermarketCart";
const Return = ({ type }) => {
  const navigate = useRouter();

  const handleCardClick = () => {
    navigate.push("/return-order-details");
  };

  const data = [
    {
      order_id: 75843,
      item_no: 1,
      price: 1200,
      date: "13th May | 03:28 pm",
    },
  ];

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

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

  return (
    <section className="Return Ordered">
      {order?.data?.map((item, index) => {
        return (
          <Order_Details_Card
            data={item}
            type={type}
            key={item.order_id}
            showTrackOrder={true}
            track_order_text="Order Return Tracking"
            onClick={handleCardClick}
            baseLike={`/return-order-details/${encodeId(item?.id)}?type=Return`}
          />
        );
      })}

      {/* <div className="no_data_main_div">
        <p className="no_data_text">No more orders to show</p>
      </div> */}

      <div>
        {order?.data?.length === 0 && (
          <div className="lottie_div">
            <SupermarketCart />
          </div>
        )}
        <div className="no_data_main_div">
          <p className="no_data_text">No more orders to show</p>
        </div>
      </div>
    </section>
  );
};

export default Return;
