import { Component, h, Event, State, Prop, Element, Watch } from '@stencil/core';
export class GdUserDashboardImportDatalistDialog {
  constructor() {
    /**
     * when to show the dialog
     */
    this.show = false;
    /**
     * a visual state to show loading in the import button
     */
    this.importing = false;
    /**
     * whether the datalist is valid or not (has history items)
     */
    this.invalid = false;
  }
  componentDidLoad() {
    this.validateDatalist();
  }
  /**
   * anytime a new datalist is passed in, validate it and show errors if needed
   */
  validateDatalist() {
    var _a, _b;
    if (!((_b = (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.historyItems) === null || _b === void 0 ? void 0 : _b.length)) {
      this.invalid = true;
    }
    else {
      this.invalid = false;
    }
  }
  handleClose() {
    if (this.importing)
      return;
    this.invalid = false;
    this.el.shadowRoot.querySelector('bs-modal').closeDialog();
  }
  importItems() {
    var _a, _b;
    if (!((_b = (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.historyItems) === null || _b === void 0 ? void 0 : _b.length))
      return;
    this.importing = true;
    this.import.emit(this.datalist.historyItems);
    // visually wait a bit before closing
    setTimeout(() => {
      this.importing = false;
      this.handleClose();
    }, 1000);
  }
  /**
   * renders the dialog
   */
  render() {
    var _a, _b, _c, _d, _e, _f;
    return (h("bs-modal", { static: true, scrollable: true, show: this.show, onClose: () => this.closed.emit() },
      h("bs-modal-header", { "modal-title": `<bs-icon size="20" class="mr-2" icon="fab fa-file-import"></bs-icon> Add Shared Items To Your Dashboard` }),
      h("bs-modal-body", null,
        ((_b = (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.historyItems) === null || _b === void 0 ? void 0 : _b.length) && (h("div", null,
          h("p", null, this.datalist.description),
          h("bs-list-group", null, (_d = (_c = this.datalist) === null || _c === void 0 ? void 0 : _c.historyItems) === null || _d === void 0 ? void 0 : _d.map(historyItem => (h("bs-list-group-item", null, historyItem.label || historyItem.url)))))),
        this.invalid && (h("div", { class: "text-danger" },
          h("p", null, "Sorry, the requested datalist was not found."),
          h("p", null, "Please notify the user that provided you with this link.")))),
      h("bs-modal-footer", null,
        h("bs-button", { variant: "secondary", onClick: this.handleClose.bind(this), disabled: this.importing }, this.invalid ? 'Close' : 'Cancel'),
        !this.invalid && (this.importing ? (h("bs-button", { variant: "primary", disabled: true },
          h("bs-spinner", { "aria-hidden": "true", size: "sm" }),
          h("span", { class: "ml-2" }, "Adding..."))) : (h("bs-button", { variant: "primary", onClick: this.importItems.bind(this), disabled: !((_f = (_e = this.datalist) === null || _e === void 0 ? void 0 : _e.historyItems) === null || _f === void 0 ? void 0 : _f.length) }, "Add Items"))))));
  }
  static get is() { return "gd-user-dashboard-import-datalist-dialog"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gd-user-dashboard-import-datalist-dialog.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gd-user-dashboard-import-datalist-dialog.css"]
  }; }
  static get properties() { return {
    "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"
    },
    "datalist": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Datalist",
        "resolved": "{ description: string; url: string; historyItems: HistoryItem[]; }",
        "references": {
          "Datalist": {
            "location": "import",
            "path": "../gd-user-dashboard/gd-user-dashboard"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "the datalist to import history items from"
      }
    }
  }; }
  static get states() { return {
    "importing": {},
    "invalid": {}
  }; }
  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": "import",
      "name": "import",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "event emitted to import items"
      },
      "complexType": {
        "original": "Array<HistoryItem>",
        "resolved": "HistoryItem[]",
        "references": {
          "Array": {
            "location": "global"
          },
          "HistoryItem": {
            "location": "import",
            "path": "../gd-user-dashboard-list-item/user-dashboard-list-item"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "datalist",
      "methodName": "validateDatalist"
    }]; }
}
