/* eslint-disable no-underscore-dangle */
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import Zoom from "react-spatial/components/Zoom";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import FitExtent from "./FitExtent";
import Geolocation from "./Geolocation";
import MenuToggler from "./MenuToggler";
import useOverlayWidth from "../../utils/useOverlayWidth";
import { ReactComponent as ZoomOut } from "../../img/minus.svg";
import { ReactComponent as ZoomIn } from "../../img/plus.svg";
import useHasScreenSize from "../../utils/useHasScreenSize";
import { setZoomType } from "../../model/map/actions";
import FloorSwitcher from "../FloorSwitcher";
const propTypes = {
  geolocation: PropTypes.bool,
  fitExtent: PropTypes.bool,
  menuToggler: PropTypes.bool,
  floorSwitcher: PropTypes.bool,
  children: PropTypes.node
};
const useStyles = makeStyles(theme => {
  return {
    mapControls: {
      position: "absolute",
      display: "flex",
      flexDirection: "column",
      top: 0,
      right: props => props.overlayWidth,
      marginTop: props => props.margin,
      marginRight: props => props.margin,
      gap: props => props.margin,
      "& .rs-zooms-bar": {
        position: "relative",
        display: "flex",
        flexDirection: "column",
        boxShadow: "0 0 7px rgb(0 0 0 / 90%)",
        transition: "box-shadow 0.5s ease",
        borderRadius: 20,
        gap: 1,
        "&::after": {
          position: "absolute",
          content: '""',
          top: 40,
          left: 0,
          height: 1,
          width: "100%",
          backgroundColor: "#e8e7e7"
        },
        "&:hover": {
          boxShadow: "0 0 12px 2px rgb(0 0 0 / 90%)"
        },
        "& .rs-zoom-in, .rs-zoom-out": {
          background: "white",
          height: 40,
          width: 40,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          border: "none",
          color: theme.colors.darkGray,
          "& svg": {
            "& path": {
              transition: "stroke 0.5s ease",
              fill: "currentColor",
              stroke: "currentColor"
            }
          },
          "&:hover": {
            color: theme.palette.secondary.dark
          }
        },
        "& .rs-zoom-in": {
          borderRadius: "20px 20px 0 0"
        },
        "& .rs-zoom-out": {
          borderRadius: "0 0 20px 20px"
        }
      }
    }
  };
});
function MapControls(_ref) {
  var _activeTopic$menuTogg;
  let {
    menuToggler = false,
    geolocation = true,
    fitExtent = true,
    floorSwitcher = false,
    children
  } = _ref;
  const dispatch = useDispatch();
  const overlayWidth = useOverlayWidth();
  const screenHeight = useSelector(state => state.app.screenHeight);
  const activeTopic = useSelector(state => state.app.activeTopic);
  const isSmallHeight = useMemo(() => {
    return ["xs", "s"].includes(screenHeight);
  }, [screenHeight]);
  const hasSmallHeader = useHasScreenSize(["xs", "s", "m"]);
  const isMobile = useHasScreenSize();
  const classes = useStyles({
    overlayWidth: isMobile ? 0 : overlayWidth,
    margin: hasSmallHeader || isSmallHeight ? 10 : 15
  });
  const {
    t
  } = useTranslation();
  const map = useSelector(state => state.app.map);
  return /*#__PURE__*/React.createElement("div", {
    className: "wkp-map-controls ".concat(classes.mapControls),
    "data-testid": "map-controls-wrapper"
  }, menuToggler && ((_activeTopic$menuTogg = activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.menuToggler) !== null && _activeTopic$menuTogg !== void 0 ? _activeTopic$menuTogg : /*#__PURE__*/React.createElement(MenuToggler, null)), /*#__PURE__*/React.createElement(Zoom, {
    map: map,
    zoomInChildren: /*#__PURE__*/React.createElement(ZoomIn, null),
    zoomOutChildren: /*#__PURE__*/React.createElement(ZoomOut, null),
    zoomSlider: false,
    titles: {
      zoomIn: t("Hineinzoomen"),
      zoomOut: t("Rauszoomen")
    },
    onZoomInButtonClick: () => {
      dispatch(setZoomType("maps control button"));
    },
    onZoomOutButtonClick: () => {
      dispatch(setZoomType("maps control button"));
    }
  }), geolocation && /*#__PURE__*/React.createElement(Geolocation, null), fitExtent && /*#__PURE__*/React.createElement(FitExtent, null), floorSwitcher && /*#__PURE__*/React.createElement(FloorSwitcher, null), children);
}
MapControls.propTypes = propTypes;
export default /*#__PURE__*/React.memo(MapControls);
//# sourceMappingURL=MapControls.js.map