import { useState } from "react";
import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import { setAddressType } from "../../../../app/slices/common/locationSlice/locationSlice";
import MapSearchComponent from "./searchComponent";
import GpsFixedIcon from "@mui/icons-material/GpsFixed";
import useLocationHook from "../../../../app/hook/locationFinderHook";
import { showSnackbar } from "../../../../app/slices/common/customSnackBar/customSnackbarSlice";
import React from "react";
import { LocationConfirmationPrompt } from "./LocationConfirmationPromt";
import CustomDialog from "../../../components/custom/dialog";

export const LoadingPopup = ({ onCloseModal }: any) => {
  const dispatch = useAppDispatch();
  const [selectedId, setSelectedId] = useState("");
  const [modalType, setModalType] = React.useState("");
  const { fetchLocation, permissionDenied, modalOpen } = useLocationHook();
  // const { addTocart } = useAppSelector((state) => state.CartState);
  // const cartData = addTocart?.data;

  const onOpenModal = (type: string) => {
    setModalType(type);
  };
  const promptClose = () => {
    setModalType("");
  };
  const onModalCloseCallback = (event: any) => {
    if (event === "confirmed") {
      fetchLocation();
    }
  };
  const clickFindLocation = () => {
    dispatch(setAddressType(""));
    setSelectedId("");
    if (permissionDenied) {
      dispatch(
        showSnackbar({
          message:
            "Location access was denied. Please enable location services in your browser settings and reload.",
          severity: "info",
        })
      );
    } else {
      //   if (cartData?.length !== 0) {
      //     onOpenModal("locationConfirmation");
      //   } else {
      fetchLocation();
      // }
    }
  };

  return (
    <>
      <div
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: 400,
          color: "var(--main)",
          backgroundColor: "var(--white)",
        }}
      >
        <div className=" modal-dialog modal-dialog-centered address-c modalCentered show">
          <div className="modal-content text-center" style={{ padding: "3%" }}>
            <img
              src="/images/Web-Logo.png"
              style={{
                display: "block",
                marginLeft: "auto",
                marginRight: "auto",
                width: "25%",
              }}
            />
            <div className="header mb-0" style={{ padding: "3%" }}>
              <div
                className="demo-title fw-5"
                style={{ fontSize: "18px", marginTop: "15px" }}
              >
                Choose Delivery Location
              </div>
            </div>
            <div className="tf-login-form w-70">
              <form className="">
                <div className="tf-search-content">
                  <div className="tf-mini-cart-bottom">
                    <div className="tf-mini-cart-bottom-wrap">
                      <div>
                        <MapSearchComponent onCloseModal={onCloseModal} />
                      </div>

                      <a href="#" className="w-100">
                        <div className="tf-btn mt-4 radius-3 w-100 justify-content-start orange-b btn-add-note">
                          <div className="pe-3">
                            <GpsFixedIcon color="secondary" />
                          </div>
                          <div onClick={clickFindLocation}>
                            Get current location
                            <br />
                            <span className="fw-4 fs-12">Using GPS</span>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
                {/* <div className="bottom">
                  <div>
                    <select className="tf-select border-0" data-default="">
                      <option value="">INDIA</option>
                    </select>
                  </div>
                </div> */}
              </form>
            </div>
          </div>
        </div>
      </div>
      <CustomDialog
        component={
          <LocationConfirmationPrompt
            onClose={promptClose}
            onModalCloseCallback={onModalCloseCallback}
            isFromCheckout={false}
          />
        }
        title=""
        openDialog={modalType === "locationConfirmation"}
        handleCloseDialog={promptClose}
        modalPlace="center"
      />
    </>
  );
};