import { Component, h, Event, State, Prop, Element, Watch } from '@stencil/core';
import { stringContainsJson } from '../../shared/utils';
export class GdUserDashboardImportDialog {
  constructor() {
    /**
     * when to show the dialog
     */
    this.show = false;
    /**
     * the imported history items
     */
    this.historyItems = [];
    /**
     * a visual state to show loading in the import button
     */
    this.importing = false;
  }
  setImportOptions() {
    if (this.show) {
      this.historyItems = [];
    }
  }
  handleChange(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.length) <= 0) {
      return;
    }
    const file = event.detail[0];
    const reader = new FileReader();
    reader.addEventListener('load', (event) => {
      const result = event.target.result;
      if (stringContainsJson(result)) {
        this.historyItems = [].concat(JSON.parse(result));
      }
      else {
        this.invalidError = 'The file you uploaded contains invalid JSON';
      }
    });
    reader.readAsText(file);
  }
  handleClose() {
    if (this.importing)
      return;
    this.invalidError = null;
    this.el.shadowRoot.querySelector('bs-modal').closeDialog();
  }
  importItems() {
    if (!this.historyItems.length)
      return;
    this.invalidError = null;
    this.importing = true;
    this.import.emit(this.historyItems);
    // visually wait a bit before closing
    setTimeout(() => {
      this.importing = false;
      this.handleClose();
    }, 1000);
  }
  /**
   * renders the dialog
   */
  render() {
    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-file-import"></bs-icon> Import` }),
      h("bs-modal-body", null,
        h("bs-form-row", null,
          h("bs-form-group", null,
            h("bs-form-file", { accept: ".json", "file-id": "fileUpload", label: "Choose a file to import", onBsOnInput: this.handleChange.bind(this) })))),
      h("bs-modal-footer", null,
        h("bs-button", { variant: "secondary", onClick: this.handleClose.bind(this), disabled: this.importing }, "Cancel"),
        this.importing ? (h("bs-button", { variant: "primary", disabled: true },
          h("bs-spinner", { "aria-hidden": "true", size: "sm" }),
          h("span", { class: "ml-2" }, "Importing..."))) : (h("bs-button", { variant: "primary", onClick: this.importItems.bind(this), disabled: !this.historyItems.length }, "Import")))));
  }
  static get is() { return "gd-user-dashboard-import-dialog"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gd-user-dashboard-import-dialog.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gd-user-dashboard-import-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"
    }
  }; }
  static get states() { return {
    "historyItems": {},
    "importing": {},
    "invalidError": {}
  }; }
  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": "show",
      "methodName": "setImportOptions"
    }]; }
}
