"use client";

import React, { useEffect, useState } from "react";
import "./Cancel_order.css";
import Breadcrumb_comp from "../../common-components/breadcrumb-comp/Breadcrumb_comp";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleArrowLeft } from "@fortawesome/free-solid-svg-icons";

import Order_list_table from "./order_list_table/Order_list_table";
import Select_reason_heading from "../../common-components/select_reason_heading/Select_reason_heading";
import Reason_cancelling_field_holder from "../../common-components/reason_cancelling_field_holder/Reason_cancelling_field_holder";
import { decodeId, encodeId, formatDateTime } from "../../../utils/common";
import { useDispatch, useSelector } from "react-redux";
import { getOrder } from "../../../features/order/orderSlice";
import {
  getAllReturnReason,
} from "../../../features/master/masterSlice";
import { useParams } from "next/navigation";
import Link from "next/link";

function Return_order() {
  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 [cancelReason, setCancelReason] = useState();
  const [cancelReasonId, setCancelReasonId] = useState(null);
  const [cancelReasonName, setCancelReasonName] = useState("");
  const [selectedItems, setSelectedItems] = useState([]);
  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]);

  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "My Orders", link: "/account", isActive: false },
    {
      label: "Order Details",
      link: `/order-details/${encodeId(order?.id)}`,
      isActive: false,
    },
    { label: "Return Orders", link: "", isActive: true },
  ];

  const [error, setError] = useState(false);

  const reason = useSelector((state) => state.master.returnReasons);
  useEffect(() => {
    // Ensure ID is valid before dispatching
    dispatch(getAllReturnReason());
  }, [dispatch]);
  const appSetupdata = useSelector((state) => state.master.app_setup);
  // useEffect(() => {
  //   // Ensure ID is valid before dispatching
  //   dispatch(appSetup());
  // }, [dispatch]);

  return (
    <>
      <section className="Cancel_order">
        <Breadcrumb_comp breadcrumbs={breadcrumbs} />
        <div className=" cancel_order_holder">
          <div className="container">
            <div className="title_holder">
              <div className="heading_holder">
                <h4>
                  <Link href={`/order-details/${encodeId(order?.id)}`}>
                    <FontAwesomeIcon
                      className=" arrow_icon me-2"
                      icon={faCircleArrowLeft}
                    />
                  </Link>{" "}
                  Return Order
                </h4>
              </div>

              <div className="text_holder">
                <h6>Order ID #{order?.invoice_no}</h6>
                <h5>{formatDateTime(order?.updatedAt)}</h5>
              </div>
            </div>

            <Order_list_table
              type="Return"
              setError={setError}
              error={error}
              order={order}
              selectedItems={selectedItems}
              setSelectedItems={setSelectedItems}
            />

            <Select_reason_heading
              type="Return"
              reason={reason}
              setError={setError}
              error={error}
              cancelReasonId={cancelReasonId}
              setCancelReasonId={setCancelReasonId}
              cancelReasonName={cancelReasonName}
              setCancelReasonName={setCancelReasonName}
            />

            <Reason_cancelling_field_holder
              type="Return"
              setError={setError}
              error={error}
              order={order}
              cancelReason={cancelReason}
              setCancelReason={setCancelReason}
              selectedItems={selectedItems}
              cancelReasonId={cancelReasonId}
            />
          </div>
        </div>
      </section>
    </>
  );
}

export default Return_order;
