"use client";

import React, { useEffect, useState } from "react";
import "./Cancel_order_details.css";
import Breadcrumb_comp from "../../common-components/breadcrumb-comp/Breadcrumb_comp";
import Order_id_holder from "../order_details/order_id_holder/Order_id_holder";

import Payment_Summary from "../order_details/payment_Summary/Payment_Summary";
import { decodeId } from "../../../utils/common";
import { useDispatch, useSelector } from "react-redux";
import { getOrder, getSingleCancelOrder } from "../../../features/order/orderSlice";


import Receiver_info_holder_return from "../order_details/receiver_info_holder/Receiver_info_holder_return";
import Order_details_table_cancel from "../order_details/order_details_table/Order_details_table_cancel";
import { useParams, useSearchParams } from "next/navigation";
function Cancel_order_details() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "My Orders", link: "/account", isActive: false },
    { label: "Cancelled Order Details", link: "", isActive: true },
  ];

  const searchParams = useSearchParams();
  const type = searchParams.get("type");
  const { id } = useParams(); // encoded ID from URL
  const [orderId, setOrderId] = useState(null); // decoded ID

  useEffect(() => {
    if (id) {
      const decoded = decodeId(id);
      setOrderId(decoded);
    }
  }, [id]);

  const dispatch = useDispatch();
  const order = useSelector((state) => state.order.cancelOrder);
  useEffect(() => {
    if(orderId){
 dispatch(getSingleCancelOrder({ id: orderId, order_status_id: 11 }));
    }
    
    // if (orderId) {
    //   // Ensure ID is valid before dispatching
    //   if (type === "Return") {
    //     dispatch(getOrder({ id: orderId, order_status_id: 8 }));
    //   }
    //   if (type === "Cancel") {
    //     dispatch(getOrder({ id: orderId, order_status_id: 11 }));
    //   }
    // }
  }, [dispatch, orderId]);

  
  
  return (
    <>
      <section className="Order_details">
        <Breadcrumb_comp breadcrumbs={breadcrumbs} />

        <div className="container">
          <div className="row">
            <div className=" col-lg-8 col-md-7">
              <Order_id_holder order={order} headingText="Order ID #859865" />

              {/* <Order_details_table order={order} /> */}

               <Order_details_table_cancel order={order} />
            </div>
            <div className="col-lg-4 col-md-5">
              <Receiver_info_holder_return order={order} />

              <Payment_Summary order={order} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Cancel_order_details;
