import { h, } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class DrawToolbar {
  constructor() {
    this.callCancel = () => this.cancel();
    this.callConfirm = () => this.confirm();
    this.visible = false;
    this.featureCount = 0;
    this.cancelText = _t("webmapgl.draw-toolbar.cancel");
    this.color = "primary";
    this.confirmText = _t("webmapgl.draw-toolbar.confirm");
    this.label = _t("webmapgl.draw-toolbar.label");
    this.mapId = "";
    this.maxFeatures = 1;
    this.minFeatures = 1;
  }
  handleDrawEnter(e) {
    if (e.detail.mapId !== this.mapId)
      return;
    this.featureCount = 0;
    this.visible = true;
  }
  handleDrawExit(e) {
    if (e.detail.mapId !== this.mapId)
      return;
    this.visible = false;
  }
  handleDrawCreate(e) {
    if (e.detail.mapId !== this.mapId)
      return;
    this.featureCount += 1;
  }
  handleDrawDelete(e) {
    if (e.detail.mapId !== this.mapId)
      return;
    this.featureCount -= 1;
  }
  cancel() {
    this.glDrawCancel.emit({
      mapId: this.mapId,
    });
  }
  confirm() {
    this.glDrawConfirm.emit({
      mapId: this.mapId,
    });
  }
  render() {
    if (!this.visible)
      return;
    let small = screen.width <= 640;
    let canConfirm = this.featureCount >= this.minFeatures &&
      this.featureCount <= this.maxFeatures;
    return (h("ion-toolbar", { color: this.color }, h("ion-title", null, this.label), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: this.callCancel }, h("ion-icon", { slot: small ? "icon-only" : "start", name: "close" }), small ? null : this.cancelText), h("ion-button", { onClick: canConfirm ? this.callConfirm : undefined, disabled: !canConfirm }, h("ion-icon", { slot: small ? "icon-only" : "start", name: "checkmark" }), small ? null : this.confirmText))));
  }
  static get is() { return "gl-draw-toolbar"; }
  static get properties() {
    return {
      "cancelText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Text for the cancel button."
        },
        "attribute": "cancel-text",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.draw-toolbar.cancel\")"
      },
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "Color",
          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
          "references": {
            "Color": {
              "location": "import",
              "path": "@ionic/core",
              "id": ""
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Background color for the toolbar."
        },
        "attribute": "color",
        "reflect": false,
        "defaultValue": "\"primary\""
      },
      "confirmText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Text for the confirm button."
        },
        "attribute": "confirm-text",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.draw-toolbar.confirm\")"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Label for the toolbar."
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.draw-toolbar.label\")"
      },
      "mapId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "ID of the map with the drawing session.\n\nThis defaults to the empty string as when a gl-map element is created without an id, the mapId passed along the glDraw events defaults to the empty string."
        },
        "attribute": "map-id",
        "reflect": false,
        "defaultValue": "\"\""
      },
      "maxFeatures": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Maximum number of features the user can draw."
        },
        "attribute": "max-features",
        "reflect": false,
        "defaultValue": "1"
      },
      "minFeatures": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Minimum number of features the user must draw before confirming."
        },
        "attribute": "min-features",
        "reflect": false,
        "defaultValue": "1"
      }
    };
  }
  static get states() {
    return {
      "visible": {},
      "featureCount": {}
    };
  }
  static get events() {
    return [{
        "method": "glDrawCancel",
        "name": "glDrawCancel",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the user cancels the draw session."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "glDrawConfirm",
        "name": "glDrawConfirm",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the user confirms the drawn features."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get listeners() {
    return [{
        "name": "glDrawEnter",
        "method": "handleDrawEnter",
        "target": "body",
        "capture": false,
        "passive": false
      }, {
        "name": "glDrawExit",
        "method": "handleDrawExit",
        "target": "body",
        "capture": false,
        "passive": false
      }, {
        "name": "glDrawCreate",
        "method": "handleDrawCreate",
        "target": "body",
        "capture": false,
        "passive": false
      }, {
        "name": "glDrawDelete",
        "method": "handleDrawDelete",
        "target": "body",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=draw-toolbar.js.map
