"use client";

import React, { useEffect, useState } from "react";
import "./Return_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 Order_return_Tracking from "../../common-components/order_return_Tracking/Order_return_Tracking";
import Green_btn from "../../common-components/common_btn/green_btn/Green_btn";
import { decodeId, OrderStatusIds } from "../../../utils/common";
import { useDispatch, useSelector } from "react-redux";
import { getOrder, getSingleReturnOrder } from "../../../features/order/orderSlice";


import Receiver_info_holder_return from "../order_details/receiver_info_holder/Receiver_info_holder_return";
import Return_Order_details_table from "../order_details/order_details_table/Return_Order_details_table";
import { useParams, useRouter } from "next/navigation";

function Return_order_details() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "My Orders", link: "/account", isActive: false },
    { label: "Return Order Details", link: "", isActive: true },
  ];
 const navigate = useRouter();

  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.returnOrder);
  useEffect(() => {
    if (orderId) {
      // Ensure ID is valid before dispatching
      dispatch(getSingleReturnOrder({ id: orderId, order_status_id:OrderStatusIds.Returned }));
    }
  }, [dispatch, orderId]);

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

        <div className="container">
          <div className="row">
            <div className=" col-lg-8 col-md-7">
              <Order_id_holder
                headingText={
                  <>
                    {" "}
                    <div
                      style={{
                        fontSize: "14px",
                        fontWeight: "600",
                      }}
                    >
                      <span>Return Request</span>{" "}
                      <span style={{ color: "#007C08" }}>Accepted</span>
                    </div>
                  </>
                }
                subText={"We'll pick up soon the item you wish to return."}
                order={order}
              />

              <Return_Order_details_table order={order}/>

              <Order_return_Tracking order={order} />

              <div className="btn_holder">
                <Green_btn btnText={"OK"} onClick={() => navigate.push("/account")} />
              </div>
            </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 Return_order_details;
