function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useState, useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
import PropTypes from "prop-types";
import { FaInfo } from "react-icons/fa";
import useTranslation from "../../utils/useTranslation";
import FeatureInformation from "../FeatureInformation";
import MenuItem from "../Menu/MenuItem";
import { setFeatureInfo, setMenuOpen } from "../../model/app/actions";
const propTypes = {
  menuItemProps: PropTypes.shape({}),
  property: PropTypes.string
};

/**
 * Generic menu use to display feature info.
 * See TrackerMenu for an example of use.
 */
function FeatureMenu(_ref) {
  let {
    property = "useMenu",
    menuItemProps
  } = _ref;
  const {
    t
  } = useTranslation();
  const dispatch = useDispatch();
  const menuOpen = useSelector(state => state.app.menuOpen);
  const featureInfo = useSelector(state => state.app.featureInfo);
  const [collapsed, setCollapsed] = useState(false);
  const filtered = useMemo(() => {
    return featureInfo === null || featureInfo === void 0 ? void 0 : featureInfo.filter(info => {
      const {
        layer,
        features
      } = info;
      if (layer.get("popupComponent") && layer.get(property)) {
        if (typeof layer.hidePopup === "function") {
          return features.find(f => !layer.hidePopup(f, layer, featureInfo));
        }
        return true;
      }
      return false;
    });
  }, [featureInfo, property]);

  // Hide the main menu if there is something to display
  useEffect(() => {
    if (filtered !== null && filtered !== void 0 && filtered.length) {
      dispatch(setMenuOpen(false));
    }
  }, [dispatch, filtered]);

  // Hide the feature menu when we open the main menu
  useEffect(() => {
    if (!collapsed && menuOpen) {
      dispatch(setFeatureInfo());
    }
  }, [collapsed, dispatch, menuOpen]);
  if (!featureInfo || !featureInfo.length) {
    return null;
  }
  if (!filtered.length) {
    return null;
  }
  return /*#__PURE__*/React.createElement(MenuItem, _extends({
    className: "wkp-feature-menu",
    title: t("Detailinformationen"),
    icon: /*#__PURE__*/React.createElement(FaInfo, null),
    open: true,
    collapsed: collapsed,
    onCollapseToggle: c => {
      dispatch(setMenuOpen(false));
      setCollapsed(c);
    },
    onClose: () => {
      dispatch(setFeatureInfo());
    }
  }, menuItemProps || {}), /*#__PURE__*/React.createElement(FeatureInformation, {
    featureInfo: filtered
  }));
}
FeatureMenu.propTypes = propTypes;
export default FeatureMenu;
//# sourceMappingURL=FeatureMenu.js.map