import React, { useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import PropTypes from "prop-types";
import { FaAngleDown, FaAngleUp } from "react-icons/fa";
import { unByKey } from "ol/Observable";
import useTranslation from "../../utils/useTranslation";
import getLayersAsFlatArray from "../../utils/getLayersAsFlatArray";
import Button from "../Button";
import { ReactComponent as MenuOpenImg } from "../../img/sbb/040_hamburgermenu_102_36.svg";
import { ReactComponent as MenuClosedImg } from "../../img/sbb/040_schliessen_104_36.svg";
function TopicsMenuHeader(_ref) {
  let {
    isOpen = false,
    onToggle
  } = _ref;
  const activeTopic = useSelector(state => state.app.activeTopic);
  const layers = useSelector(state => state.map.layers);
  const [forceRender, setForceRender] = useState(1);
  const {
    t
  } = useTranslation();
  useEffect(() => {
    const keys = getLayersAsFlatArray(layers || []).map(layer => layer.on("change:visible", () => {
      setForceRender(forceRender + 1);
    }));
    return () => {
      unByKey(keys);
    };
  }, [layers, forceRender]);
  const layerNames = useMemo(() => {
    const flatLayers = getLayersAsFlatArray(layers || []) || [];
    const topicLayers = flatLayers.reverse().filter(l => {
      return !l.get("isBaseLayer") && !l.get("hideInLayerTree") && !l.get("hideInLegend") && !flatLayers.includes(l.parent) // only root layers
      ;
    });
    const visibleLayers = topicLayers.filter(l => l.visible);
    return visibleLayers.length > 0 && visibleLayers.length === topicLayers.length ? ["alle aktiviert"] : visibleLayers.map(l => l.name);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [layers, forceRender]);
  return /*#__PURE__*/React.createElement(Button, {
    className: "wkp-menu-header".concat(isOpen ? " open" : ""),
    "aria-expanded": isOpen,
    tabIndex: 0,
    title: t("Menü"),
    onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle()
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-menu-header-mobile"
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-menu-header-toggler"
  }, isOpen ? /*#__PURE__*/React.createElement(MenuClosedImg, null) : /*#__PURE__*/React.createElement(MenuOpenImg, null), /*#__PURE__*/React.createElement("span", {
    className: "wkp-menu-header-menu-title"
  }, t("Menü")))), /*#__PURE__*/React.createElement("div", {
    className: "wkp-menu-header-desktop"
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-menu-title ".concat(!layerNames.length ? "" : "large")
  }, t(activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.name)), /*#__PURE__*/React.createElement("div", {
    className: "wkp-menu-toggler"
  }, isOpen ? /*#__PURE__*/React.createElement(FaAngleUp, {
    focusable: false
  }) : /*#__PURE__*/React.createElement(FaAngleDown, {
    focusable: false
  })), /*#__PURE__*/React.createElement("div", {
    className: "wkp-menu-layers ".concat(layerNames.length ? "" : "hidden")
  }, layerNames.map(layerName => t(layerName)).join(", ").replace(/<\/?[^>]+(>|$)/g, "") // clean html tags
  )));
}
TopicsMenuHeader.propTypes = {
  onToggle: PropTypes.func,
  isOpen: PropTypes.bool
};
export default /*#__PURE__*/React.memo(TopicsMenuHeader);
//# sourceMappingURL=TopicsMenuHeader.js.map