import React, { useEffect, useState } from "react";
import "./Ordered.css";
import Order_Details_Card from "../order_details_card/Order_Details_Card";
import OrderTrackModal from "../../../common-components/common_modal/order_track_modal/OrderTrackModal";
import { getAllOrder } from "../../../../features/order/orderSlice";
import { useDispatch, useSelector } from "react-redux";
import { encodeId } from "../../../../utils/common";
import SupermarketCart from "../../../Animation/supermarket-cart/SupermarketCart";

const Ordered = ({ type }) => {
  const [showCouponModal, setShowCouponModal] = useState(false);
  const data = [
    {
      order_id: 75843,
      item_no: 1,
      price: 1200,
      date: "13th May | 03:28 pm",
      subtext: "Delivering in 10 mins",
    },
  ];
  const dispatch = useDispatch();
  const order = useSelector((state) => state.order.allOrders);

  useEffect(() => {
    const statusIds = [1, 2, 3, 4, 5];
    dispatch(getAllOrder({ order_status_id: statusIds }));
  }, [dispatch]);

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

        <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 Ordered;
