import React, { useEffect } from "react";

import "./Order_id_holder.css";
import Return_Lottie from "../../../Animation/return_Lottie/Return_Lottie";
import { formatDateTime } from "../../../../utils/common";
import { useDispatch, useSelector } from "react-redux";
import { usePathname } from "next/navigation";


function Order_id_holder({ headingText, subText, order }) {
  const pathname = usePathname();
  const isReturnPage = pathname === "/return-order-details";

  const dispatch = useDispatch();
  const app_setup = useSelector((state) => state.master.app_setup);

  // useEffect(() => {
  //   dispatch(appSetup());
  // }, [dispatch]);




  return (
    <>
      <section className="Order_id_holder" >
        <div className="order_id">
          <div className="img_id_holder">
            {!isReturnPage && (
              <div>
                <div className="img_holder">
                  <img
                    className="Product_img"
                    // src={ process.env.PUBLIC_URL +   "/assets/images/logo/new_ekansi_logo.png"}
                    src={process.env.NEXT_PUBLIC_IMG_URL + app_setup?.logo}
                    alt="Product_img"
                  />
                </div>
              </div>
            )}

            {isReturnPage && (
              <div className="animation_holder">
                <Return_Lottie />
              </div>
            )}

            <div className="ms-3">
              {/* <h2 className="para_secondary_text">{order?.invoice_no}</h2> */}
              <h2 className="para_secondary_text">
                {[4, 6, 2].includes(order?.order_status_id)
                  ? order?.invoice_no
                  : order?.Product_Order?.invoice_no}
              </h2>
              <p
                style={{
                  fontSize: "12px",
                  fontWeight: "600",
                }}
              >
                {subText}
              </p>
            </div>
          </div>
          <p className="date_text">{formatDateTime(order?.updatedAt)}</p>
        </div>
      </section>
    </>
  );
}

export default Order_id_holder;
