function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useRef, useCallback, useState, useEffect } from "react";
import { Style, Icon } from "ol/style";
import { makeStyles } from "@mui/styles";
import RsGeolocation from "react-spatial/components/Geolocation";
import { useSelector, useDispatch } from "react-redux";
import useTranslation from "../../../utils/useTranslation";
import MapButton from "../../MapButton";
import Geolocate from "../../../img/Geolocate";
import geolocateMarkerWithDirection from "../../../img/geolocate_marker_direction.svg";
import geolocateMarker from "../../../img/geolocate_marker.svg";
import { setGeolocating } from "../../../model/app/actions";
import { trackEvent } from "../../../utils/trackingUtils";
const degreesToRadians = degrees => {
  return degrees * (Math.PI / 180);
};
const useStyles = makeStyles(theme => _objectSpread(_objectSpread({}, theme.animations), {}, {
  geolocation: {
    padding: 0
  },
  geolocationActive: {
    color: "#c60018",
    "&:hover": {
      color: "#c60018"
    },
    "& svg": {
      animation: "$fadeInOut 1.5s infinite"
    }
  },
  rsGeolocation: {
    display: "flex",
    alignItems: "center",
    borderRadius: "50%"
  }
}));
function Geolocation() {
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  const map = useSelector(state => state.app.map);
  const activeTopic = useSelector(state => state.app.activeTopic);
  const [geolocationFeature, setGeolocationFeature] = useState(null);
  const dispatch = useDispatch();
  const isGeolocating = useSelector(state => state.app.isGeolocating);
  const isFollowing = useSelector(state => state.app.isFollowing);
  const featureRef = useRef(geolocationFeature);
  const setGeolocFeatureWithRef = feature => {
    featureRef.current = feature;
    setGeolocationFeature(feature);
  };
  const deviceOrientationListener = useCallback(evt => {
    const feature = featureRef.current; // Use ref to always get the current feature
    if (feature) {
      if (evt.webkitCompassHeading) {
        // For iOS
        feature.set("rotation", degreesToRadians(evt.webkitCompassHeading));
      } else if (evt.alpha || evt.alpha === 0) {
        if (evt.absolute) {
          feature.set("rotation", degreesToRadians(360 - evt.alpha));
        } else {
          // not absolute event; e.g. firefox, lets disable everything again
          window.removeEventListener("deviceorientation", deviceOrientationListener);
          feature.set("rotation", false);
        }
      }
    }
  }, [featureRef]);
  const onGeolocateToggle = useCallback(() => {
    if (isGeolocating) {
      // Deactivate geolocation
      dispatch(setGeolocating(false));
      setGeolocFeatureWithRef();
      window.removeEventListener("deviceorientation", deviceOrientationListener);
      return;
    }
    trackEvent({
      eventType: "action",
      componentName: "maps control button",
      label: t("Lokalisieren"),
      location: t(activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.name, {
        lng: "de"
      }),
      variant: t("Lokalisieren", {
        lng: "de"
      })
    }, activeTopic);
    dispatch(setGeolocating(true));
    if ("ondeviceorientationabsolute" in window) {
      window.addEventListener("deviceorientationabsolute", deviceOrientationListener);
    } else if (typeof DeviceOrientationEvent.requestPermission === "function") {
      DeviceOrientationEvent.requestPermission().then(permissionState => {
        if (permissionState === "granted") {
          window.addEventListener("deviceorientation", deviceOrientationListener, true);
        }
      }).catch(alert);
    } else {
      window.addEventListener("deviceorientation", deviceOrientationListener);
    }
  }, [deviceOrientationListener, dispatch, isGeolocating, activeTopic, t]);
  const styleFunction = useCallback(feature => {
    if (!feature) {
      return null;
    }
    if (!geolocationFeature || feature !== geolocationFeature) {
      setGeolocFeatureWithRef(feature);
    }
    const style = new Style();
    const rotation = feature.get("rotation");
    style.setImage(new Icon({
      src: rotation || rotation === 0 ? geolocateMarkerWithDirection : geolocateMarker,
      rotation: rotation || 0,
      anchor: [21, 46],
      anchorXUnits: "pixels",
      anchorYUnits: "pixels"
    }));
    return style;
  }, [geolocationFeature]);
  useEffect(() => {
    // Remove geolocate listener on component unmount
    return () => window.removeEventListener("deviceorientation", deviceOrientationListener);
  }, [deviceOrientationListener]);
  return /*#__PURE__*/React.createElement(MapButton, {
    onClick: onGeolocateToggle,
    className: "wkp-geolocation ".concat(classes.geolocation, " ").concat(isGeolocating ? classes.geolocationActive : ""),
    "data-testid": "map-controls-geolocation",
    tabIndex: -1
  }, /*#__PURE__*/React.createElement(RsGeolocation, {
    title: t("Lokalisieren"),
    className: classes.rsGeolocation,
    map: map,
    noCenterAfterDrag: true,
    neverCenterToPosition: isFollowing,
    onError: () => dispatch(setGeolocating(false)),
    colorOrStyleFunc: styleFunction
  }, /*#__PURE__*/React.createElement(Geolocate, {
    className: isGeolocating ? "pulse" : null,
    focusable: false
  })));
}
Geolocation.propTypes = {};
export default Geolocation;
//# sourceMappingURL=Geolocation.js.map