import { h } from '@stencil/core';
export class GdUserDashboardBulkTagDialog {
  constructor() {
    /**
     * the history items to tag
     */
    this.historyItemIds = [];
    /**
     * when to show the dialog
     */
    this.show = false;
    /**
     * the tags to be added
     */
    this.newTags = [];
  }
  handleClose() {
    // @ts-ignore
    this.el.shadowRoot.querySelector('bs-modal').closeDialog();
  }
  tagItems() {
    if (!this.newTags.length) {
      // can only tag items if the user inputted tags
      return;
    }
    // trigger the event to add tags
    this.addTags.emit({
      tags: this.newTags,
      historyItemIds: this.historyItemIds,
    });
    // visually wait a bit before closing
    setTimeout(() => {
      this.newTags = [];
      this.handleClose();
    }, 1000);
  }
  /**
   * renders the dialog
   */
  render() {
    var _a;
    return (h("bs-modal", { show: this.show, onClose: () => this.closed.emit() }, h("bs-modal-header", { "modal-title": `<bs-icon size="20" class="mr-2" icon="fab fa-tags"></bs-icon> Add Tags` }), h("bs-modal-body", null, h("gd-tag-input", { variant: "pills", placeholder: "Add tag...", onTagsChange: (e) => (this.newTags = e.detail) })), h("bs-modal-footer", null, h("bs-button", { variant: "secondary", onClick: this.handleClose.bind(this) }, "Cancel"), h("bs-button", { variant: "primary", onClick: this.tagItems.bind(this), disabled: !((_a = this.newTags) === null || _a === void 0 ? void 0 : _a.length) }, "Add Tags"))));
  }
  static get is() { return "gd-user-dashboard-bulk-tag-dialog"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["gd-user-dashboard-bulk-tag-dialog.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["gd-user-dashboard-bulk-tag-dialog.css"]
    };
  }
  static get properties() {
    return {
      "historyItemIds": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "string[]",
          "resolved": "string[]",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "the history items to tag"
        },
        "defaultValue": "[]"
      },
      "show": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "when to show the dialog"
        },
        "attribute": "show",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "newTags": {}
    };
  }
  static get events() {
    return [{
        "method": "closed",
        "name": "closed",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "event emitted when the dialog is closed"
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }, {
        "method": "addTags",
        "name": "addTags",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "event emitted to tag items"
        },
        "complexType": {
          "original": "TagOptions",
          "resolved": "{ tags: string[]; historyItemIds: string[]; }",
          "references": {
            "TagOptions": {
              "location": "local"
            }
          }
        }
      }];
  }
  static get elementRef() { return "el"; }
}
