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'

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 className='no_data_main_div'>
          <p className='no_data_text'>No more orders to show</p>
        </div>

      </section>



    </>
  )
}

export default Ordered
