import React, { useState } from "react";
import "./Order_Details_Card.css";

import { encodeId, formatDateTime } from "../../../../utils/common";
import OrderTrackModal from "../../../common-components/common_modal/order_track_modal/OrderTrackModal";
import { useRouter } from "next/navigation";
import Link from "next/link";

const Order_Details_Card = ({
  data,
  showTrackOrder,
  track_order_text,
  onClick,
  baseLike,
  type,
}) => {
  const [showCouponModal, setShowCouponModal] = useState(false);


  const navigate = useRouter();
  return (
    <>
      <section className="Order_Details_Card ">
        <div className="top_section">
          {/* <p className="order_id">Product Name : {data?.Product_Order_Details?.Product?.name}</p> */}
          {/* <p className="order_id">Product Name : <span className="date_text">{data?.Product_Order_Details?.map(item => item?.Product?.name).join(',')}</span></p>           */}
        </div>

        <div className="top_section">
          <p className="order_id">
            Order ID #{data?.invoice_no || data?.Product_Order?.invoice_no}
          </p>

          <div className="date_text_div">
            <p className="date_text">{formatDateTime(data?.updatedAt)}</p>
          </div>
        </div>

        <div className="middle_section">
          <p className="black_text">
            {data?.no_of_item || data?.quantity || 1} Items
          </p>

          {showTrackOrder && (
            <p
              className="track_order_text"
              onClick={() => {
                if (type === "Ordered") {
                  setShowCouponModal(true);
                } else if (type === "Return") {
                  navigate.push(`/return-order-details/${encodeId(data?.id)}`);
                }
              }}
            >            
              {track_order_text}
            </p>
          )}
        </div>

        <div className="bottom_section">
          <p className="black_text">
            ₹.{Number(data?.total_amount).toFixed(2)}
            {/* <span className='subtext'>{data?.subtext}</span> */}
          </p>
          <Link href={baseLike}>
            <p className="view_details_text">View Details</p>
          </Link>
        </div>
      </section>
      <OrderTrackModal
        data={data}
        show={showCouponModal}
        onHide={() => {
          setShowCouponModal(false);
        }}
      />
    </>
  );
};

export default Order_Details_Card;
