import { useEffect, useState } from "react";
import { Footer } from "../../../layouts/footer";
import ResponsiveAppBar from "../../../layouts/navbar";
import { fetchNotificationListAsync } from "../../../../app/slices/notificationSlice/NotificationSlice";
import { useAppDispatch } from "../../../../app/redux/hooks";
import { useNavigate } from "react-router-dom";
import { CircularProgress } from "@mui/material";

export const NotificationPage = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const [notifications, setNotifications] = useState<any>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    dispatch(fetchNotificationListAsync()).then((response: any) => {
      setNotifications(response?.payload?.data?.notification_list);
      setIsLoading(false);
    });
  }, []);

  const handleNotificationClick = (order_uuid: any) => {
    localStorage.setItem("order_uuid", order_uuid);
    navigate("/order-confirmation");
  };
  return (
    <>
      <div
        id="wrapper"
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: 400,
          color: "var(--main)",
          backgroundColor: "var(--white)",
        }}
      >
        <ResponsiveAppBar />
        <h3 className="fs-22 fw-6 text-center mt-5">Notifications</h3>
        <section className="flat-spacing-16 pt-4">
          {isLoading ? (
            <div className="container">
              <div className="row justify-content-center">
                <div className="col-6" style={{ minHeight: "50vh" }}>
                  <CircularProgress
                    style={{
                      position: "absolute",
                      top: "50%",
                      left: "50%",
                      transform: "translate(-50%, -50%)",
                    }}
                  />
                </div>
              </div>
            </div>
          ) : (
            <div className="container">
              <div className="row justify-content-center">
                <div className="col-6">
                  {notifications?.map((item: any, index: number) => {
                    const date = new Date(`${item.date}T${item.time}`);
                    const formattedDate = date.toLocaleDateString("en-GB", {
                      day: "2-digit",
                      month: "short",
                      year: "numeric",
                    });
                    // const formattedTime = date.toLocaleTimeString("en-US", {
                    //   hour: "2-digit",
                    //   minute: "2-digit",
                    //   hour12: true,
                    // });

                    return (
                      <div key={index}>
                        <div
                          className="tf-icon-box noti style-border-line mb-3"
                          style={{ cursor: "pointer" }}
                          onClick={() =>
                            handleNotificationClick(item.order_uuid)
                          }
                        >
                          <p className="small address-text">
                            {formattedDate}, {item.time}
                          </p>
                          <h3 className="fs-16 fw-5 line-n">{item.Sendmsg}</h3>
                          <p className="fw-5 address-text">
                            {item.Description}
                          </p>
                          <p className="address-text">
                            🍰 Keep Enjoying our delicious treats!
                          </p>
                        </div>
                      </div>
                    );
                  })}

                  {/* <div className="tf-icon-box noti style-border-line mb-3">
                  <p className="small address-text">20 Nov 2024, 12:30 PM</p>
                  <h3 className="fs-16 fw-5 line-n">Review Approved! ✅</h3>
                  <p className="fw-5 address-text">
                    Your review is now live. Thanks for sharing your thoughts!
                  </p>
                  <button className="btn-reorder mt-2">
                    View my Reviews <i className="icon icon-arrow-right"></i>
                  </button>
                </div>
                <div className="tf-icon-box noti style-border-line mb-3">
                  <p className="small address-text">20 Nov 2024, 12:30 PM</p>
                  <h3 className="fs-16 fw-5 line-n">Payment Successful! 💳</h3>
                </div>
                <div className="tf-icon-box noti style-border-line mb-3">
                  <p className="small address-text">20 Nov 2024, 12:30 PM</p>
                  <h3 className="fs-16 fw-5 line-n">Payment Failed! ❌</h3>
                </div>
                <div className="tf-icon-box noti style-border-line mb-3">
                  <p className="small address-text">20 Nov 2024, 12:30 PM</p>
                  <h3 className="fs-16 fw-5 line-n">Order Confirmed! 🎉</h3>
                </div>
                <div className="tf-icon-box noti style-border-line mb-3">
                  <p className="small address-text">20 Nov 2024, 12:30 PM</p>
                  <h3 className="fs-16 fw-5 line-n">Order Dispatched! 🚚</h3>
                </div>
                <div className="tf-icon-box noti style-border-line mb-3">
                  <p className="small address-text">20 Nov 2024, 12:30 PM</p>
                  <h3 className="fs-16 fw-5 line-n">Order Delivered! ✅</h3>
                </div> */}
                </div>
              </div>
            </div>
          )}
        </section>
        <Footer />
      </div>
    </>
  );
};