"use client";


import React, { useEffect, useState } from "react";
import "./Order_details.css";
import Breadcrumb_comp from "../../common-components/breadcrumb-comp/Breadcrumb_comp";
import Order_id_holder from "./order_id_holder/Order_id_holder";
import Order_details_table from "./order_details_table/Order_details_table";
import Receiver_info_holder from "./receiver_info_holder/Receiver_info_holder";
import Payment_Summary from "./payment_Summary/Payment_Summary";

import { decodeId } from "../../../utils/common";
import { getOrder } from "../../../features/order/orderSlice";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "next/navigation";


function Order_details() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "MY Orders", link: "/account", isActive: false },
    { label: "Order Details", link: "", isActive: true },
  ];

  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.order);
  useEffect(() => {
    if (orderId) {
      // Ensure ID is valid before dispatching
      dispatch(getOrder({id:orderId,order_status_id:''}));
    }
  }, [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} />
            </div>
            <div className="col-lg-4 col-md-5">
              <Receiver_info_holder order={order} />

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

export default Order_details;
