import { useNavigate } from "react-router-dom";
import { Footer } from "../../../layouts/footer";
import ResponsiveAppBar from "../../../layouts/navbar";
import { ProductTypes } from "../landingPage/components/productTypes";
import { MyCart } from "../../private/chekout/components/myCart";
import { useEffect, useState } from "react";
import { useAppDispatch } from "../../../../app/redux/hooks";
import { getPastOrderDataDetailsAsync } from "../../../../app/slices/checkoutSlice/CheckoutSlice";

export const CustomOrderSubmitted = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const [order, setOrder] = useState({}) as any;

  useEffect(() => {
    const orderUUID = localStorage.getItem("custom_order_uuid");
    if (orderUUID) {
      dispatch(getPastOrderDataDetailsAsync(orderUUID)).then(
        (response: any) => {
          if (response?.payload?.status === 200) {
            setOrder(response?.payload?.data?.order_details);
          }
        }
      );
    }
  }, []);

  const convertTimeFormat = (createdDate: any | undefined) => {
    if (createdDate && createdDate !== "Not Provided") {
      const date = new Date(createdDate);

      const day = date.getDate();
      const month = date.toUTCString().split(" ")[2];
      const year = date.getFullYear().toString().slice(-2);
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const isPM = hours >= 12;
      const formattedHours = hours % 12 || 12;
      const formattedMinutes = minutes.toString().padStart(2, "0");
      const period = isPM ? "PM" : "AM";

      return `${day}th ${month} ${year} - ${formattedHours}:${formattedMinutes}${period}`;
    }
    return "";
  };

  return (
    <>
      <ResponsiveAppBar />
      <ProductTypes />
      <div
        className="tf-breadcrumb"
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: "400",
        }}
      >
        <div className="container">
          <div className="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div className="tf-breadcrumb-list">
              <a className="text" onClick={() => navigate("/")}>
                Home
              </a>
              <i className="icon icon-arrow-right"></i>
              <span className="text">My Order Checkout</span>
            </div>
          </div>
        </div>
      </div>
      <section className="flat-spacing-11">
        <div
          className="container"
          style={{
            fontFamily: "Albert Sans, sans-serif",
            fontSize: "14px",
            lineHeight: "22px",
            fontWeight: "400",
          }}
        >
          <div className="row">
            <div className="col-md-8" style={{ marginLeft: "18%" }}>
              <div className="mb-3 confirm-order">
                <div className="row align-items-center justify-content-center ">
                  <div className="col-12 text-center">
                    <img src="/images/success.svg" width="50" alt="" />
                    <h6 className="my-2 fw-6">
                      Your Custom Cake Request is Submitted !
                    </h6>
                    <p>
                      <b className="address-text">
                        Our Team is Reviewing your request.
                        <br />
                        You will hear from us shortly.
                      </b>
                    </p>
                  </div>
                </div>
              </div>

              <div className="wd-form-order">
                <div className="tf-grid-layout md-col-12 gap-15 border-dotted">
                  <div className="item">
                    <div className="d-flex justify-content-between">
                      <div className="ms-2">
                        <b>{order?.order_ID}</b>
                      </div>
                      {/* <div className="ms-2">19th Nov 24 - 03:35pm  Wed, Mar 26, 2025,10:00 AM</div> */}
                      <div className="ms-2">
                        {convertTimeFormat(order?.created_date)}
                      </div>
                    </div>
                    <hr className="dotted" />
                    <div className="d-flex">
                      <div className="ms-2">
                        <div className="text-2 mt_4 fw-6">
                          {order?.shop_name}
                        </div>
                        <div>
                          <p>{order?.shop_location}</p>
                        </div>
                      </div>
                    </div>
                    <div className="d-flex mt-2 align-items-center">
                      <div>
                        <i className="fa fa-circle-phone orange-txt fs-7"></i>
                      </div>
                      <div className="ms-2">
                        <div className="text-2 text_black-2">
                          <p>For Urgent Enquiries, Contact us at</p>
                        </div>
                        <div className="text-2 mt_4 fw-6">
                          <span>+91 {order?.shop_contact}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="tf-grid-layout md-col-12 gap-15 border-dotted">
                  <div className="item">
                    <div
                      className="row"
                      style={{ paddingLeft: "15px", paddingRight: "15px" }}
                    >
                      <div className="col-12 mt-3 px-1">
                        <p>Product Selected</p>
                        <b>{order?.custom_product?.item_name}</b>
                      </div>
                    </div>
                    <div
                      className="row"
                      style={{ paddingLeft: "15px", paddingRight: "15px" }}
                    >
                      <div className="col-12 mt-3 px-1">
                        <p>Your Request</p>
                        <textarea
                          placeholder="description"
                          readOnly
                          name="description"
                          className="enq"
                          id="description"
                          value={order?.description}
                        ></textarea>
                      </div>
                    </div>
                    <div
                      className="row"
                      style={{ paddingLeft: "15px", paddingRight: "15px" }}
                    >
                      <div className="col-12 mt-3 px-1">
                        <p>Message on Cake</p>
                        <textarea
                          placeholder="Message"
                          readOnly
                          name="message"
                          className="enq"
                          id="message"
                          value={order?.message}
                        ></textarea>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="widget-content-inner mt-3 border-dotted">
                  <div className="text-2 fw-6">Order Status</div>
                  <div className="widget-timeline">
                    <ul
                      className="timeline"
                      style={{ top: "7%", bottom: "6%" }}
                    >
                      <li>
                        <div
                          className={
                            order?.order_status === "Enquiry" ||
                            order?.order_status === "Bill Created" ||
                            // order?.order_status === "New Order" ||
                            order?.order_status === "Confirmed" ||
                            order?.order_status === "Viewed" ||
                            order?.order_status === "Order Packed" ||
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <span className="timeline-panel">
                            <div className="text-2 fw-6">Enquiry Submitted</div>
                          </span>
                        </div>
                      </li>
                      <li>
                        <div
                          className={
                            order?.order_status === "Bill Created" ||
                            // order?.order_status === "New Order" ||
                            order?.order_status === "Confirmed" ||
                            order?.order_status === "Viewed" ||
                            order?.order_status === "Order Packed" ||
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <span className="timeline-panel">
                            <div className="text-2 fw-6">Proforma Invoice Created</div>
                          </span>
                        </div>
                      </li>
                      {/* <li>
                        <div
                          className={
                            order?.order_status === "New Order" ||
                            // localconfirmedOrder?.order_status === "Failed" ||
                            order?.order_status === "Confirmed" ||
                            order?.order_status === "Viewed" ||
                            order?.order_status === "Order Packed" ||
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <div className="text-2 fw-6">Order is Pending</div>
                          
                        </div>
                      </li> */}
                      <li>
                        <div
                          className={
                            order?.order_status === "Confirmed" ||
                            order?.order_status === "Viewed" ||
                            order?.order_status === "Order Packed" ||
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <div className="text-2 fw-6">Order is Placed</div>
                          {/* <span>
                              {formatDateToMMDDYYYY(orderDate?.toString())}
                            </span> */}
                        </div>
                      </li>
                      <li>
                        <div
                          className={
                            order?.order_status === "Viewed" ||
                            order?.order_status === "Order Packed" ||
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <div className="text-2 fw-6">Order Accepted</div>
                          {/* <span>10/07/2024 4:30pm</span> */}
                        </div>
                      </li>
                      <li>
                        <div
                          className={
                            order?.order_status === "Order Packed" ||
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <div className="text-2 fw-6">Order is Packed</div>
                          {/* <span>10/07/2024 4:30pm</span> */}
                        </div>
                      </li>
                      <li>
                        <div
                          className={
                            order?.order_status === "Delivery Assigned" ||
                            order?.order_status === "Dispatching" ||
                            order?.order_status === "Despatched" ||
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <a className="timeline-panel" href="#">
                            <div className="text-2 fw-6">Delivery Assigned</div>
                            {/* <span>11/07/2024 2:36pm</span> */}
                          </a>
                        </div>
                      </li>
                      <li>
                        <div
                          className={
                            order?.order_status === "Delivered"
                              ? "timeline-badge success"
                              : "timeline-badge"
                          }
                        ></div>
                        <div className="timeline-box">
                          <a className="timeline-panel" href="#">
                            <div className="text-2 fw-6">Order Delivered</div>
                            {/* <span>
                                {convertDateToMMDDYYYY(
                                  localconfirmedOrder?.delivery_slot_date
                                )}
                              </span>
                              &nbsp;
                              <span>
                                {convertTimeTo12HourFormat(
                                  localconfirmedOrder?.delivery_slot_time
                                )}
                              </span> */}
                          </a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                {/* <div className="tf-grid-layout md-col-12 mt-3 gap-15">
                  <div className="item">
                    <div className="d-flex">
                      <div className="ms-2">
                        <div className="text-2 fw-6">Steps</div>
                        <div>
                          Request Submitted{" "}
                          <i className="fa fa-arrow-right"></i> Pending Approval{" "}
                          <i className="fa fa-arrow-right"></i> Approved{" "}
                          <i className="fa fa-arrow-right"></i> Payment Pending{" "}
                          <i className="fa fa-arrow-right"></i> In Progress{" "}
                          <i className="fa fa-arrow-right"></i> Ready to Pickup
                        </div>
                      </div>
                    </div>
                  </div>
                </div> */}
              </div>
            </div>

            {/* <div className="col-md-4 modal-shopping-cart pe-5 ps-0">
              <div className="wrap">
                <div className="tf-mini-cart-wrap card pt-4">
                  <div className="tf-mini-cart-main">
                    <h5 className="px-4 ms-2 fs-20 fw-6">People also Liked</h5>
                    <div className="tf-mini-cart-sroll">
                      <div className="tf-mini-cart-items">
                        <div
                          className="tf-mini-cart-item"
                          style={{ margin: "0 36px" }}
                        >
                          <div className="tf-mini-cart-image">
                            <a href="#">
                              <img src="images/product03.png" alt="" />
                            </a>
                          </div>
                          <div className="tf-mini-cart-info">
                            <a className="title link" href="#">
                              Puffs Meat
                            </a>
                            <div className="price fw-6">₹25.00</div>
                            <div className="tf-mini-cart-btns">
                              <div className="wg-quantity small">
                                <span className="btn-quantity minus-btn">
                                  -
                                </span>
                                <input type="text" name="number" value="1" />
                                <span className="btn-quantity plus-btn">+</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          className="tf-mini-cart-item"
                          style={{ margin: "0 36px" }}
                        >
                          <div className="tf-mini-cart-image">
                            <a href="#">
                              <img src="images/product05.png" alt="" />
                            </a>
                          </div>
                          <div className="tf-mini-cart-info">
                            <a className="title link" href="#">
                              Banana Chips
                            </a>
                            <div className="price fw-6">₹105.00</div>
                            <div className="tf-mini-cart-btns">
                              <div className="wg-quantity small">
                                <span className="btn-quantity minus-btn">
                                  -
                                </span>
                                <input type="text" name="number" value="1" />
                                <span className="btn-quantity plus-btn">+</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> */}
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
};