import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import PropTypes from "prop-types";
import { FaLock } from "react-icons/fa";
import LayerTree from "react-spatial/components/LayerTree";
import { withStyles } from "@mui/styles";
import { MenuItem } from "@mui/material";
import { Layer } from "mobility-toolbox-js/ol";
import LayerService from "../../utils/LayerService";
import Collapsible from "../Collapsible";
import InputIcon from "../InputIcon";
import filters from "../../filters";
import { setActiveTopic, setFeatureInfo, updateDrawEditLink } from "../../model/app/actions";
import Select from "../Select/Select";
import InfosButton from "../InfosButton";
import TopicInfosButton from "../TopicInfosButton";
import { trackEvent } from "../../utils/trackingUtils";
const styles = () => ({
  wrapperBaseLayerSelect: {
    margin: "4px 20px 5px 23px",
    width: "calc(100% - 42px)",
    display: "none"
  },
  layerTreeInput: {
    border: "none",
    background: "none",
    width: "min-content"
  },
  topicMenuWrapper: {
    display: "flex",
    gap: 8
  }
});
const propTypes = {
  topic: PropTypes.shape().isRequired,
  // mapStateToProps
  menuOpen: PropTypes.bool.isRequired,
  activeTopic: PropTypes.shape().isRequired,
  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
  // mapDispatchToProps
  dispatchSetActiveTopic: PropTypes.func.isRequired,
  dispatchSetFeatureInfo: PropTypes.func.isRequired,
  // Mui
  classes: PropTypes.object.isRequired,
  t: PropTypes.func.isRequired
};
class TopicMenu extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isCollapsed: false,
      currentBaseLayerKey: null
    };
  }
  onTopicClick(topic) {
    const {
      activeTopic,
      dispatchSetActiveTopic,
      dispatchSetFeatureInfo,
      t
    } = this.props;
    const {
      isCollapsed
    } = this.state;
    trackEvent({
      eventType: "action",
      componentName: "radio button",
      location: t(activeTopic.name, {
        lng: "de"
      }),
      variant: t(topic.key, {
        lng: "de"
      })
    }, activeTopic);
    if (topic.key === activeTopic.key) {
      this.setState({
        isCollapsed: !isCollapsed
      });
    } else {
      dispatchSetActiveTopic(topic);
      dispatchSetFeatureInfo();
    }
  }
  renderLockIcon(topic, isInfo) {
    const {
      activeTopic,
      t
    } = this.props;
    const className = "wkp-lock-icon".concat(isInfo ? " wkp-lock-left" : "").concat(activeTopic.key === topic.key ? " wkp-active" : "");
    return /*#__PURE__*/React.createElement("div", {
      className: className
    }, /*#__PURE__*/React.createElement(FaLock, {
      focusable: false,
      title: t("Vertraulich/ Nur SBB-intern verfügbar")
    }));
  }
  render() {
    const {
      t,
      layers,
      topic,
      activeTopic,
      menuOpen,
      classes
    } = this.props;
    const {
      isCollapsed,
      currentBaseLayerKey
    } = this.state;
    let layerTree = null;
    const TopicMenuBottom = topic.topicMenuBottom;
    if (activeTopic.key === topic.key && layers) {
      layerTree = /*#__PURE__*/React.createElement("div", {
        className: "wkp-layer-tree"
      }, /*#__PURE__*/React.createElement(LayerTree, {
        isItemHidden: l => l.get("isBaseLayer") || l.get("hideInLegend") || l.get("hideInLayerTree"),
        layers: layers,
        t: t,
        titles: {
          layerShow: t("Layer anzeigen"),
          layerHide: t("Layer verbergen"),
          subLayerShow: t("Layer anzeigen"),
          subLayerHide: t("Layer verbergen")
        },
        renderLabel: layer => {
          return (
            /*#__PURE__*/
            // eslint-disable-next-line react/no-danger
            React.createElement("span", {
              dangerouslySetInnerHTML: {
                __html: t(layer.name)
              }
            })
          );
        },
        renderItemContent: (layer, layerTreeComp) => /*#__PURE__*/React.createElement(React.Fragment, null, layer.renderItemContent ? layer.renderItemContent(layerTreeComp) : layerTreeComp.renderItemContent(layer), layer.get("hasInfos") && /*#__PURE__*/React.createElement(InfosButton, {
          selectedInfo: layer
        })),
        renderAfterItem: (layer, level) => {
          let filter = null;
          let renderAfterItem = null;
          if (typeof layer.get("filtersComponent") === "string") {
            const FiltersComponent = filters[layer.get("filtersComponent")];
            filter = FiltersComponent && /*#__PURE__*/React.createElement("div", {
              style: {
                display: "flex",
                paddingLeft: "".concat(30 * (level + 1), "px")
              }
            }, /*#__PURE__*/React.createElement(FiltersComponent, {
              layer: layer
            }));
          }
          if (typeof layer.get("renderAfterItem") === "function") {
            renderAfterItem = layer.get("renderAfterItem")(layer, level);
          }
          return /*#__PURE__*/React.createElement(React.Fragment, null, filter, renderAfterItem);
        },
        renderCheckbox: layer => {
          return /*#__PURE__*/React.createElement("button", {
            type: "button",
            className: classes.layerTreeInput,
            onClick: () => {
              // eslint-disable-next-line no-param-reassign
              layer.visible = !layer.visible;
            },
            "aria-label": layer.name
          }, /*#__PURE__*/React.createElement(InputIcon, {
            type: layer.get("group") && "radio",
            checked: layer.visible,
            "data-cy": "input-icon-".concat(layer.name)
          }));
        }
      }));
    }
    const collapsed = isCollapsed || activeTopic.key !== topic.key;
    const isActiveTopic = topic.key === activeTopic.key;
    const isMenuVisibleLayers = (topic.layers || []).find(l => {
      return !l.get("hideInLegend") && !l.get("isBaseLayer") && !l.get("hideInLayerTree");
    });
    const baseLayers = new LayerService(layers).getBaseLayers();
    const currentBaseLayer = baseLayers.find(l => l.visible);
    return /*#__PURE__*/React.createElement("div", {
      className: "wkp-topic-menu"
    }, /*#__PURE__*/React.createElement("div", {
      className: "wkp-topic-menu-item-wrapper"
    }, /*#__PURE__*/React.createElement("div", {
      className: "wkp-topic-menu-item",
      role: "button",
      tabIndex: 0,
      "aria-expanded": !isCollapsed,
      onClick: () => this.onTopicClick(topic),
      onKeyPress: e => e.which === 13 && this.onTopicClick(topic)
    }, /*#__PURE__*/React.createElement("div", {
      className: "wkp-topic-title".concat(isActiveTopic ? " wkp-active" : "", " ").concat(classes.topicMenuWrapper)
    }, /*#__PURE__*/React.createElement(InputIcon, {
      type: "radio",
      checked: isActiveTopic
    }), t(topic.name)), isMenuVisibleLayers && /*#__PURE__*/React.createElement("div", {
      className: "wkp-layer-toggler ".concat(collapsed ? "collapsed" : ""),
      style: {
        display: isActiveTopic ? "block" : "none"
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "wkp-topic-icons"
    }, topic && topic.permission && this.renderLockIcon(topic, topic.description || topic.layerInfoComponent), menuOpen && topic && (topic.description || topic.layerInfoComponent) && /*#__PURE__*/React.createElement(TopicInfosButton, {
      topic: topic
    }))), /*#__PURE__*/React.createElement("div", {
      className: "wkp-topic-content"
    }, /*#__PURE__*/React.createElement(Collapsible, {
      isCollapsed: isCollapsed
    }, topic.key === activeTopic.key && baseLayers.length > 1 && /*#__PURE__*/React.createElement("div", {
      className: "wkp-base-layer-switcher-mobile ".concat(classes.wrapperBaseLayerSelect)
    }, /*#__PURE__*/React.createElement(Select, {
      fullWidth: true,
      value: currentBaseLayerKey || (currentBaseLayer === null || currentBaseLayer === void 0 ? void 0 : currentBaseLayer.name) || (currentBaseLayer === null || currentBaseLayer === void 0 ? void 0 : currentBaseLayer.key),
      onChange: evt => {
        const {
          value
        } = evt.target;
        const baseLayer = baseLayers.find(_ref => {
          let {
            name,
            key
          } = _ref;
          const val = name || key;
          return val === value || val === value;
        });
        baseLayer.visible = true;
        this.setState({
          currentBaseLayerKey: baseLayer.name || baseLayer.key
        });
      },
      "data-cy": "baselayer-select"
    }, baseLayers.map(_ref2 => {
      let {
        name,
        key
      } = _ref2;
      const value = name || key;
      return /*#__PURE__*/React.createElement(MenuItem, {
        key: value,
        value: value
      }, t(value));
    }))), layerTree, topic.key === activeTopic.key && TopicMenuBottom ? /*#__PURE__*/React.createElement(TopicMenuBottom, {
      topic: topic
    }) : null)));
  }
}
TopicMenu.propTypes = propTypes;
const mapStateToProps = state => ({
  menuOpen: state.app.menuOpen,
  map: state.app.map,
  activeTopic: state.app.activeTopic,
  layers: state.map.layers,
  t: state.app.t
});
const mapDispatchToProps = {
  dispatchSetActiveTopic: setActiveTopic,
  dispatchSetFeatureInfo: setFeatureInfo,
  dispatchUpdateDrawEditLink: updateDrawEditLink
};
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(styles, {
  withTheme: true
}))(TopicMenu);
//# sourceMappingURL=TopicMenu.js.map