import { h } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class StoryButton {
  constructor() {
    this.clickAction = () => this.doAction();
    this.story = undefined;
    this.disabled = false;
    this.action = "next";
    this.icon = undefined;
    this.label = undefined;
    this.storyId = undefined;
  }
  async componentWillLoad() {
    await this.updateStory();
  }
  async updateStory() {
    this.story = document.querySelector(this.storyId != undefined ? `gl-story#${this.storyId}` : "gl-story");
    await this.story.componentOnReady();
    this.updateDisabled();
  }
  updateDisabled() {
    const story = this.story;
    if (story == undefined)
      return;
    this.disabled = {
      first: story.step === 0,
      last: story.step === story.steps - 1,
      next: story.step == undefined || story.step === story.steps - 1,
      previous: story.step == undefined || story.step === 0,
      exit: false,
    }[this.action];
  }
  doAction() {
    const story = this.story;
    if (story == undefined)
      return;
    story.step = {
      first: 0,
      last: story.steps - 1,
      next: story.step + 1,
      previous: story.step - 1,
      exit: undefined,
    }[this.action];
  }
  render() {
    let title = _t(`webmapgl.story-button.${this.action}`);
    let icon = this.icon ||
      {
        first: "play-skip-back-outline",
        last: "play-skip-forward-outline",
        next: "play-forward-outline",
        previous: "play-back-outline",
        exit: "close-outline",
      }[this.action];
    return (h("ion-button", { onClick: this.clickAction, title: title, disabled: this.disabled }, h("ion-icon", { slot: "icon-only", name: icon })));
  }
  static get is() { return "gl-story-button"; }
  static get properties() {
    return {
      "action": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"first\" | \"last\" | \"next\" | \"previous\" | \"close\"",
          "resolved": "\"close\" | \"first\" | \"last\" | \"next\" | \"previous\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Where in the story this button will take you"
        },
        "attribute": "action",
        "reflect": false,
        "defaultValue": "\"next\""
      },
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The icon for the button"
        },
        "attribute": "icon",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "An alternative name for this button"
        },
        "attribute": "label",
        "reflect": false
      },
      "storyId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The id of the story which this button acts upon"
        },
        "attribute": "story-id",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "story": {},
      "disabled": {}
    };
  }
  static get watchers() {
    return [{
        "propName": "storyId",
        "methodName": "updateStory"
      }];
  }
  static get listeners() {
    return [{
        "name": "glStoryChange",
        "method": "updateDisabled",
        "target": "body",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=story-button.js.map
