import { h, Host, } from "@stencil/core";
export class StoryStep {
  constructor() {
    this._didClick = false;
    this.active = false;
    this.first = false;
    this.last = false;
    this.hash = undefined;
    this.clickBeforeHash = false;
    this.clickAfterIdle = true;
    this.clickDelay = 0;
    this.clickLayer = undefined;
    this.clickProperty = undefined;
    this.clickValue = undefined;
    this.mapId = undefined;
  }
  activeChanged() {
    if (this.active)
      this.activate();
  }
  activate() {
    let mapEl = document.querySelector(this.mapId != undefined ? `gl-map#${this.mapId}` : "gl-map");
    if (mapEl == undefined || mapEl.map == undefined)
      return;
    this._didClick = false;
    let doClick = () => this.scheduleClick(mapEl.map);
    // If configured, try locating the click feature before the map moves.
    if (this.clickBeforeHash)
      doClick();
    // Set the click event to fire once the map move has completed.
    // Then change the hash.
    if (this.hash != undefined) {
      if (this.clickAfterIdle)
        mapEl.map.once("idle", doClick);
      window.location.hash = this.hash[0] === "#" ? this.hash : `#${this.hash}`;
    }
  }
  scheduleClick(map) {
    if (this._didClick ||
      this.clickLayer == undefined ||
      this.clickValue == undefined)
      return;
    setTimeout(() => this.fireClickEvent(map), this.clickDelay);
  }
  fireClickEvent(map) {
    if (this._didClick)
      return;
    // If clickProperty is not set, we assume that clickValue refers to
    // the feature ID.
    let leftSide = this.clickProperty != undefined ? ["get", this.clickProperty] : ["id"];
    let features = map.queryRenderedFeatures(undefined, {
      layers: [this.clickLayer],
      filter: ["==", leftSide, this.clickValue],
    });
    if (features.length !== 0) {
      this.glFeatureClick.emit({
        features: features,
      });
      this._didClick = true;
    }
  }
  render() {
    return (h(Host, { style: { display: this.active ? "block" : "none" } }, h("slot", null)));
  }
  static get is() { return "gl-story-step"; }
  static get properties() {
    return {
      "active": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether this step in the story is active"
        },
        "attribute": "active",
        "reflect": false,
        "defaultValue": "false"
      },
      "first": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether this is the first step in the story"
        },
        "attribute": "first",
        "reflect": false,
        "defaultValue": "false"
      },
      "last": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether this is the last step in the story"
        },
        "attribute": "last",
        "reflect": false,
        "defaultValue": "false"
      },
      "hash": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The 'hash' that represents the location of the story\nVisible in the browser url when the 'hash' property of {@link ../map} is set to true."
        },
        "attribute": "hash",
        "reflect": false
      },
      "clickBeforeHash": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not to try to locate the click feature before the map moves"
        },
        "attribute": "click-before-hash",
        "reflect": false,
        "defaultValue": "false"
      },
      "clickAfterIdle": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not to click after the map has moved"
        },
        "attribute": "click-after-idle",
        "reflect": false,
        "defaultValue": "true"
      },
      "clickDelay": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Number of milliseconds to wait before clicking the map"
        },
        "attribute": "click-delay",
        "reflect": false,
        "defaultValue": "0"
      },
      "clickLayer": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "What layer the click should be fired on"
        },
        "attribute": "click-layer",
        "reflect": false
      },
      "clickProperty": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The attribute name of the feature you are clicking on\nIn essence you will be clicking on the features whose [clickProperty] = clickValue"
        },
        "attribute": "click-property",
        "reflect": false
      },
      "clickValue": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The value the feature will have in the clickProperty attribute.\nIn essence you will be clicking on the features whose [clickProperty] = clickValue\n\nAlternatively if clickProperty is not set, clickValue refers to the featureID of what you are clicking on."
        },
        "attribute": "click-value",
        "reflect": false
      },
      "mapId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The ID of the map this story step works with"
        },
        "attribute": "map-id",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "glFeatureClick",
        "name": "glFeatureClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "An event emitter that, when fired, emulates a user clicking on the map"
        },
        "complexType": {
          "original": "{\n    features: MapGeoJSONFeature[];\n  }",
          "resolved": "{ features: MapGeoJSONFeature[]; }",
          "references": {
            "MapGeoJSONFeature": {
              "location": "import",
              "path": "maplibre-gl",
              "id": ""
            }
          }
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "active",
        "methodName": "activeChanged"
      }];
  }
}
//# sourceMappingURL=story-step.js.map
