/* eslint-disable no-param-reassign */
import React, { useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { makeStyles } from "@mui/styles";
import { Divider } from "@mui/material";
import DvFeatureInfo from "../../config/ch.sbb.direktverbindungen/DvFeatureInfo";
import DvLayerSwitcher from "./DvLayerSwitcher";
import { setDisplayMenu } from "../../model/app/actions";
import IframeMenu from "../IframeMenu";
import useHasScreenSize from "../../utils/useHasScreenSize";
import useHighlightLayer from "../../utils/useHighlightLayer";
import DvFeatureInfoTitle from "../../config/ch.sbb.direktverbindungen/DvFeatureInfoTitle/DvFeatureInfoTitle";
const useStyles = makeStyles(() => {
  return {
    wrapper: {
      padding: 15
    },
    listHeader: {
      padding: "5px 12px",
      fontSize: 16,
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      backgroundColor: "#f5f5f5"
    }
  };
});
function DvMenu() {
  const dispatch = useDispatch();
  const classes = useStyles();
  const featureInfo = useSelector(state => state.app.featureInfo);
  const isMobile = useHasScreenSize();
  const urlSearch = useMemo(() => new URLSearchParams(window.location.search), []);
  const switcher = useMemo(() => /*#__PURE__*/React.createElement("div", {
    className: classes.wrapper
  }, /*#__PURE__*/React.createElement(DvLayerSwitcher, {
    row: isMobile
  })), [classes.wrapper, isMobile]);
  const showSwitcher = useMemo(() => {
    // Completely hide the switcher via the permalink
    return urlSearch.get("direktverbindungen.menu") !== "false";
  }, [urlSearch]);
  const hideMenu = useMemo(() => {
    // Hide the menu if the switcher is hidden and no features are selected
    return !showSwitcher && !(featureInfo !== null && featureInfo !== void 0 && featureInfo.length);
  }, [featureInfo === null || featureInfo === void 0 ? void 0 : featureInfo.length, showSwitcher]);
  useEffect(() => {
    // Hide menu and zoom buttons on mobile
    dispatch(setDisplayMenu(!isMobile));
  }, [isMobile, dispatch]);

  // Hook to highlight map features
  useHighlightLayer(featureInfo);
  return /*#__PURE__*/React.createElement(IframeMenu, {
    hide: hideMenu,
    header: showSwitcher ? switcher : null,
    title: /*#__PURE__*/React.createElement(DvFeatureInfoTitle, null),
    body: /*#__PURE__*/React.createElement(React.Fragment, null, showSwitcher && isMobile ? switcher : null, showSwitcher && isMobile ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(DvFeatureInfo, {
      filterByType: true
    }))
  });
}
export default DvMenu;
//# sourceMappingURL=DvMenu.js.map