import { h } from '@stencil/core';
import { defer } from '../../shared/utils';
export class GdUserDashboardShareDialog {
  constructor() {
    /**
     * the history items to share
     */
    this.historyItemIds = [];
    /**
     * when to show the dialog
     */
    this.show = false;
    /**
     * a visual state to show loading
     */
    this.working = false;
    this.copiedToClipboard = false;
    this.showErrors = false;
  }
  setShareOptions() {
    if (this.show) {
      this.shareOptions = { description: '' };
    }
  }
  handleChange(event) {
    this.shareOptions[event.detail.target.name] = event.detail.target.value;
  }
  handleClose() {
    if (this.working)
      return;
    this.showErrors = false;
    this.copiedToClipboard = false;
    this.shareUrl = '';
    this.el.shadowRoot.querySelector('bs-modal').closeDialog();
  }
  async shareItems() {
    var _a;
    this.showErrors = true;
    if (!((_a = this.shareOptions) === null || _a === void 0 ? void 0 : _a.description))
      return;
    this.working = true;
    // create a new promise that will be resolved by the application
    let generateShareUrl = defer();
    // notify the application using the component to share these history items
    this.share.emit({
      options: this.shareOptions,
      historyItemIds: this.historyItemIds,
      generateShareUrl,
    });
    try {
      // wait for a response from the application
      this.shareUrl = await generateShareUrl;
    }
    catch (err) {
      console.error('Encountered a problem generating the share URL ', err);
    }
    finally {
      this.working = false;
    }
  }
  copyShareUrlToClipboard() {
    if (!this.shareUrlEl)
      return;
    this.shareUrlEl.shadowRoot.querySelector('textarea').select();
    document.execCommand('copy');
    this.copiedToClipboard = true;
  }
  /**
   * renders the dialog
   */
  render() {
    var _a, _b, _c;
    return (h("bs-modal", { show: this.show, onClose: () => this.closed.emit() }, this.shareUrl ? (h("bs-modal-header", { "modal-title": `<bs-icon size="20" class="mr-2" icon="fab fa-link"></bs-icon> Shared Link` })) : (h("bs-modal-header", { "modal-title": `<bs-icon size="20" class="mr-2" icon="fab fa-share"></bs-icon> Share ${this.historyItemIds.length} Items` })), h("bs-modal-body", null, this.shareUrl ? (h("bs-form-row", null, h("bs-form-group", null, h("bs-form-label", null, "Share URL"), h("bs-form-control", { controlId: "shareUrl", as: "textarea", name: "shareUrl", value: this.shareUrl, readOnly: true, ref: (el) => this.shareUrlEl = el }), this.copiedToClipboard && h("span", null, "Copied to clipboard!"), !this.copiedToClipboard && h("a", { href: "javascript:;", onClick: this.copyShareUrlToClipboard.bind(this) }, "Copy to clipboard")))) : (h("bs-form-row", null, h("bs-form-group", null, h("bs-form-label", null, "Description"), h("bs-form-control", { "control-id": "description", as: "input", name: "description", type: "text", value: (_a = this.shareOptions) === null || _a === void 0 ? void 0 : _a.description, required: true, onBsInput: this.handleChange.bind(this), "is-invalid": this.showErrors && !((_b = this.shareOptions) === null || _b === void 0 ? void 0 : _b.description) }), this.showErrors && !((_c = this.shareOptions) === null || _c === void 0 ? void 0 : _c.description) && h("div", { class: "text-danger" }, "Description required"))))), this.shareUrl ? (h("bs-modal-footer", null, h("bs-button", { variant: "secondary", onClick: this.handleClose.bind(this) }, "Close"))) : (h("bs-modal-footer", null, h("bs-button", { variant: "secondary", onClick: this.handleClose.bind(this), disabled: this.working }, "Cancel"), this.working ? (h("bs-button", { variant: "primary", disabled: true }, h("bs-spinner", { "aria-hidden": "true", size: "sm" }), h("span", { class: "ml-2" }, "Generating link..."))) : (h("bs-button", { variant: "primary", onClick: this.shareItems.bind(this) }, "Generate Link"))))));
  }
  static get is() { return "gd-user-dashboard-share-dialog"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["gd-user-dashboard-share-dialog.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["gd-user-dashboard-share-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 share"
        },
        "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 {
      "shareOptions": {},
      "shareUrl": {},
      "working": {},
      "copiedToClipboard": {},
      "showErrors": {}
    };
  }
  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": "share",
        "name": "share",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "event emitted to share items"
        },
        "complexType": {
          "original": "Share",
          "resolved": "{ options: ShareOptions; historyItemIds: string[]; generateShareUrl: Promise<string>; }",
          "references": {
            "Share": {
              "location": "local"
            }
          }
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "show",
        "methodName": "setShareOptions"
      }];
  }
}
