import { h } from '@stencil/core';
import { RICH_TOOLBAR_COMMANDS } from '../ez-rich-toolbar/RichToolbarHelper';
import initI18n from '../../../utils/i18n';
export class EzLinkBuilder {
  constructor() {
    this.textToShow = undefined;
    this.link = undefined;
    this.openInNewGuide = false;
  }
  async show(text) {
    this._popupElement.opened = true;
    if (text) {
      this.textToShow = text;
    }
  }
  async hide() {
    this._popupElement.opened = false;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  async handleCancel() {
    this.clearValues();
    this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FOCUS });
    await this.hide();
  }
  clearValues() {
    this.link = '';
    this.textToShow = '';
    this.openInNewGuide = false;
  }
  async handleCreateLink() {
    const tag = `<a href="${this.link}" ${this.openInNewGuide ? 'target="_blank" rel="noopener noreferrer"' : ''}>${this.textToShow ? this.textToShow : this.link}</a>`;
    this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FORMAT, value: tag });
    this.clearValues();
    await this.hide();
  }
  async handleActionPopup(event) {
    if (event.detail === 'OK') {
      await this.handleCreateLink();
      return;
    }
    if (event.detail === 'CANCEL' || event.detail === 'CLOSE') {
      await this.handleCancel();
    }
  }
  getOkButtonStatus() {
    var _a;
    return ((_a = this.link) === null || _a === void 0 ? void 0 : _a.trim()) ? 'ENABLED' : 'DISABLED';
  }
  render() {
    return (h("ez-popup", { heightMode: 'auto', size: 'small', useHeader: false, ref: ref => this._popupElement = ref, onEzClosePopup: () => this.clearValues() }, h("div", null, h("ez-modal-container", { modalTitle: this.i18n("ez-link-builder.addLinkTitle"), modalSubTitle: this.i18n("ez-link-builder.addLinkSubtitle"), okButtonLabel: this.i18n("ez-link-builder.submit"), cancelButtonLabel: this.i18n("app.cancel"), onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: 'link-builder-container' }, h("ez-text-input", { id: 'link_url_input', label: this.i18n("ez-link-builder.urlInputLabel"), value: this.link, onEzChange: (e) => this.link = e.detail }), h("ez-text-input", { id: 'link_text_input', label: this.i18n("ez-link-builder.textInputLabel"), value: this.textToShow, onEzChange: (e) => this.textToShow = e.detail }), h("ez-check", { label: this.i18n("ez-link-builder.openInNewPage"), value: this.openInNewGuide, onEzChange: (e) => this.openInNewGuide = e.detail }))))));
  }
  static get is() { return "ez-link-builder"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-link-builder.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-link-builder.css"]
    };
  }
  static get states() {
    return {
      "textToShow": {},
      "link": {},
      "openInNewGuide": {}
    };
  }
  static get events() {
    return [{
        "method": "executeToolbarCommand",
        "name": "executeToolbarCommand",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "RichToolbarCommand",
          "resolved": "RichToolbarCommand",
          "references": {
            "RichToolbarCommand": {
              "location": "import",
              "path": "../ez-rich-toolbar/RichToolbarHelper"
            }
          }
        }
      }];
  }
  static get methods() {
    return {
      "show": {
        "complexType": {
          "signature": "(text?: string) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "hide": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
}
