import React, { useEffect } from "react";
import "./OrderInfoForModal.css";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { formatDateTime } from "../../../../../utils/common";
import { appSetup } from "../../../../../features/master/masterSlice";
import { useDispatch, useSelector } from "react-redux";

const OrderInfoForModal = ({ data, order, onHide }) => {
  const formatDate = (date) => {
    const options = {
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
    };

    // Get day and add the appropriate suffix
    const day = date?.getDate();
    const daySuffix = (day) => {
      if (day > 3 && day < 21) return "th"; // handle 11th, 12th, 13th
      switch (day % 10) {
        case 1:
          return "st";
        case 2:
          return "nd";
        case 3:
          return "rd";
        default:
          return "th";
      }
    };

    // Format month and year
    const monthOptions = { month: "short" };
    const month = new Intl.DateTimeFormat("en-US", monthOptions).format(date);

    // Format time
    const time = new Intl.DateTimeFormat("en-US", options).format(date);

    // Combine day with suffix and other formatted parts
    return `${day}${daySuffix(day)} ${month}. | ${time.toLowerCase()}`;
  };

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

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

  return (
    <section className="OrderInfoForModal">
      <div className="profile_main_holder">
        <div className="img_text_holder">
          <div className="profile_img_holder">
            <img
              // src='/assets/images/logo/new_ekansi_logo.png'
              src={process.env.NEXT_PUBLIC_IMG_URL + app_setup?.logo}
              className="logo"
            />
          </div>
          <div className="text_holder">
            <p className="odrer_id">Order ID #{data?.invoice_no}</p>
            <p className="amount">Amount : ₹ {data?.total_amount}</p>
            <p className="date_text">{formatDateTime(data?.updatedAt)}</p>
          </div>
        </div>

        <div className="close_div">
          <img
            src="/assets/images/modal/close.png"
            className="close_img"
            onClick={() => {
              onHide();
            }}
          />
        </div>
      </div>
    </section>
  );
};

export default OrderInfoForModal;
