import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import InfoIcon from "@mui/icons-material/Info";
import { setStepperActiveMenu } from "../../../../app/slices/checkoutSlice/CheckoutSlice";
import { useNavigate } from "react-router-dom";
import {
  cartFlushAsync,
  fetchCartListAsync,
} from "../../../../app/slices/cartSlice/CartSlice";
import {
  setLocationAsync,
  setLocationVerifiedStatus,
} from "../../../../app/slices/common/locationSlice/locationSlice";
import { showSnackbar } from "../../../../app/slices/common/customSnackBar/customSnackbarSlice";
import { getDecryptedToken } from "../../../../app/auth/authHandler";

export const LocationConfirmationPrompt = ({
  onClose,
  onModalCloseCallback,
  isFromCheckout,
  address,
}: any) => {
  const dispatch = useAppDispatch();
  const { profileData }: any = useAppSelector((state) => state.ProfileState);
  const navigate = useNavigate();

  const handleRetainLocation = () => {
    // const active: any = "deliveryInfo";
    // dispatch(setStepperActiveMenu(active));
    onClose();
  };
  const handleChangeLocation = () => {
    let payload: any = {};
    const aId = localStorage.getItem("aId");
    const accessToken = getDecryptedToken();

    if (aId && accessToken === null) {
      payload.anonymous_id = aId;
    }

    dispatch(cartFlushAsync(payload)).then((response: any) => {
      if (response?.payload?.status === 200) {
        const anonymous_id = accessToken ? null : aId ? aId : null;
        dispatch(fetchCartListAsync(anonymous_id));
      }
    });

    if (isFromCheckout) {
      let payload: any = {
        latitude: Number(address?.latitude),
        longitude: Number(address?.longitude),
        address_id: Number(address?.id),
      };
      dispatch(setLocationAsync(payload)).then((response: any) => {
        if (response?.payload?.data?.location) {
          dispatch(setLocationVerifiedStatus("success"));
          window.location.href = "/";
          // onCloseModal();
          dispatch(
            showSnackbar({
              message: "Location added successfully",
              severity: "success",
              autoHide: 3000,
            })
          );
        } else {
          dispatch(
            showSnackbar({
              message: "Please try again later.",
              severity: "error",
              autoHide: 3000,
            })
          );
        }
      });
      navigate("/");
    }
    onModalCloseCallback("confirmed");
    onClose();
  };
  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">
          <div className="modal-content text-center">
            <img
              src="/images/location-change.svg"
              alt=""
              style={{
                display: "block",
                marginLeft: "auto",
                marginRight: "auto",
                width: "40%",
              }}
            />
            <div className="header mb-2 text-center">
              <div
                className="demo-title"
                style={{
                  width: "100%",
                  textAlign: "center",
                }}
              >
                <h6 style={{ margin: 0 }}>Confirm Delivery Location</h6>
              </div>
            </div>
            <div className="tf-login-form">
              <form className="">
                <div className="mb-3 mt-0">
                  <p className="address-text">
                    Hey{" "}
                    {/* {profileData?.data?.first_name
                      ? profileData?.data?.first_name
                      : profileData?.data?.phone_number} */}
                    ! 😊
                  </p>
                  <p className="address-text">
                    {" "}
                    Changing your location will clear your current cart, as
                    items may vary by location.
                  </p>
                  <p className="address-text"> Would you like to proceed?</p>
                </div>
                <div className="bottom">
                  <div>
                    <a className="btn-second" onClick={handleChangeLocation}>
                      Change Location
                    </a>
                    <a className="btn-prime" onClick={handleRetainLocation}>
                      Retain Location
                    </a>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};