function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from "react";
import MapboxStyleLayer from "../MapboxStyleLayer";
import IconList from "../../components/IconList";
import lines from "../ZweitausbildungRoutesLayer/lines";
const sourceId = "ch.sbb.zweitausbildung";
const sourceLayer = "ch.sbb.zweitausbildung";

/**
 * Layer for zweitausbildung highlight routes.
 * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
 * @private
 * @class
 * @param {Object} [options] Layer options.
 */
class ZweitausbildungRoutesHighlightLayer extends MapboxStyleLayer {
  constructor() {
    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    const defautStyle = {
      type: "line",
      paint: {
        "line-color": "rgba(0,0,0,0)",
        "line-width": 10
      },
      layout: {
        "line-cap": "round"
      }
    };
    const {
      property
    } = options.properties.zweitausbildung;
    const styleLayers = [_objectSpread(_objectSpread({}, defautStyle), {}, {
      id: options.key || options.name,
      source: sourceId,
      "source-layer": sourceLayer
    })];

    // if a line has others sources to add, we add the corresponding highlight layer now.
    Object.values(lines).forEach(_ref => {
      let {
        property: prop,
        extraSources,
        extraStyleLayers = []
      } = _ref;
      if (prop !== property || !extraSources) {
        return;
      }
      Object.keys(extraSources).forEach((key, index) => {
        styleLayers.push(_objectSpread(_objectSpread({}, defautStyle), {}, {
          id: options.key || options.name + key,
          source: key
        }, extraStyleLayers[index] || {}));
      });
    });
    super(_objectSpread(_objectSpread({}, options), {}, {
      styleLayers,
      queryRenderedLayersFilter: layer => {
        return layer.filter && layer.filter[0] === "has" && layer.filter[1] === property;
      }
    }));
    this.property = property;
    this.lines = lines; // useful for the popup
    this.icons = {};
    this.onSelect = this.onSelect.bind(this);
    this.populate();
  }

  /**
   * @override
   */
  attachToMap(map) {
    super.attachToMap(map);
    if (this.map) {
      /**
       * Remove highlighted line on click on the map.
       * @ignore
       */
      this.olListenersKeys.push(this.map.on("singleclick", () => {
        this.onSelect();
        this.forceRenderList();
      }));
    }
  }

  /**
   * Add options to the select box.
   */
  populate() {
    this.selectOptions = [];
    Object.entries(lines).forEach(_ref2 => {
      let [label, {
        property,
        shortname
      }] = _ref2;
      if (property !== this.property) {
        return;
      }
      if (this.selectOptions.indexOf(label) === -1) {
        this.selectOptions.push(label);
        this.icons[label] = shortname ? "".concat(this.staticFilesUrl, "/img/layers/zweitausbildung/").concat(shortname, ".png") : null;
      }
    });
    this.selectOptions = this.selectOptions.sort((a, b) => a.localeCompare(b));
    this.selectOptions.unshift("Alle");
  }

  /**
   * Render the select box.
   */
  renderItemContent(comp) {
    if (!this.selectOptions || !this.selectOptions.length) {
      return null;
    }
    return /*#__PURE__*/React.createElement(IconList, {
      ref: el => {
        this.iconListComp = el;
      },
      t: comp.props.t,
      disabled: !this.visible,
      options: this.selectOptions,
      selected: this.selected,
      icons: this.icons,
      onSelect: this.onSelect
    });
  }

  /**
   * Force to render the list with the selected value.
   */
  forceRenderList() {
    if (this.iconListComp) {
      this.iconListComp.select(this.selected);
    }
  }

  /**
   * Calback when a new value is selected in the select box.
   */
  onSelect(option) {
    this.selected = option;
    const {
      mbMap
    } = this.mapboxLayer;
    if (!mbMap) {
      return;
    }
    this.styleLayers.forEach(_ref3 => {
      let {
        id
      } = _ref3;
      mbMap.setPaintProperty(id, "line-color", "rgba(0,0,0,0)");
    });
    if (this.selected) {
      this.highlightLine();
    }
  }

  /**
   * Highlight the line selected in the select box.
   */
  highlightLine() {
    const {
      mbMap
    } = this.mapboxLayer;
    if (!mbMap) {
      return;
    }
    const {
      color
    } = lines[this.selected] || {};
    if (!color) {
      if (this.selected !== "Alle") {
        // eslint-disable-next-line no-console
        console.log("There is no color defined for ".concat(this.selected, ", available labels are "), lines);
      }
      return;
    }
    this.styleLayers.forEach(_ref4 => {
      let {
        id
      } = _ref4;
      mbMap.setPaintProperty(id, "line-color", ["case", ["in", this.selected, ["get", this.property]], color, "rgba(0,0,0,0)"]);
    });
  }
  setStaticFilesUrl(staticFilesUrl) {
    if (this.staticFilesUrl !== staticFilesUrl) {
      this.staticFilesUrl = staticFilesUrl;
      this.populate();
    }
  }
}
export default ZweitausbildungRoutesHighlightLayer;
//# sourceMappingURL=ZweitausbildungRoutesHighlightLayer.js.map