import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import Feature from "ol/Feature";
import ZweitausbildungRoutesHighlightLayer from "../../layers/ZweitausbildungRoutesHighlightLayer";
import "./ZweitausbildungRoutesPopup.scss";
const propTypes = {
  layer: PropTypes.instanceOf(ZweitausbildungRoutesHighlightLayer).isRequired,
  feature: PropTypes.instanceOf(Feature).isRequired,
  t: PropTypes.func.isRequired,
  staticFilesUrl: PropTypes.string.isRequired
};
class ZweitausbildungRoutesPopup extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      labelSelected: null
    };
  }
  componentDidMount() {
    this.highlightFirstLine();
  }
  componentDidUpdate(prevProps) {
    const {
      feature
    } = this.props;
    if (feature !== prevProps.feature) {
      this.highlightFirstLine();
    }
  }
  componentWillUnmount() {
    const {
      layer
    } = this.props;
    layer.onSelect();
    layer.forceRenderList();
  }
  highlightFirstLine() {
    const {
      layer,
      feature
    } = this.props;
    const labels = feature.get(layer.property).split(",");
    layer.onSelect(labels[0], true);
    layer.forceRenderList();
    this.setState({
      labelSelected: labels[0]
    });
  }
  render() {
    const {
      labelSelected
    } = this.state;
    const {
      t,
      staticFilesUrl,
      layer,
      feature
    } = this.props;
    const labels = feature.get(layer.property).split(",");
    return /*#__PURE__*/React.createElement("div", {
      className: "wkp-zweitausbildung-routes-popup"
    }, labels.map(label => {
      var _layer$lines$label;
      return /*#__PURE__*/React.createElement("div", {
        className: "wkp-zweitausbildung-routes-popup-row".concat(labelSelected === label ? " highlight" : ""),
        key: label,
        onMouseEnter: () => {
          layer.onSelect(label);
          layer.forceRenderList();
          this.setState({
            labelSelected: label
          });
        }
      }, (_layer$lines$label = layer.lines[label]) !== null && _layer$lines$label !== void 0 && _layer$lines$label.shortname ? /*#__PURE__*/React.createElement("span", {
        className: "wkp-zweitausbildung-routes-popup-image"
      }, /*#__PURE__*/React.createElement("img", {
        src: "".concat(staticFilesUrl, "/img/layers/zweitausbildung/").concat(layer.lines[label].shortname, ".png"),
        height: "16",
        width: "42",
        draggable: "false",
        alt: t("Kein Bildtext")
      })) : null, /*#__PURE__*/React.createElement("b", null, label.split(":")[0]), /*#__PURE__*/React.createElement("div", {
        className: "wkp-zweitausbildung-routes-popup-desc"
      }, label.split(":")[1]));
    }));
  }
}
ZweitausbildungRoutesPopup.propTypes = propTypes;
const composed = ZweitausbildungRoutesPopup;
composed.renderTitle = (feat, layer, t) => t("Detailinformationen");
export default composed;
//# sourceMappingURL=ZweitausbildungRoutesPopup.js.map