import { h, Host } from '@stencil/core';
import { RICH_TOOLBAR_COMMANDS } from './RichToolbarHelper';
import initI18n from '../../../utils/i18n';
export class EzRichToolbar {
  constructor() {
    this.showPreview = true;
    this.isPreviewMode = false;
    this.showConfigs = true;
    this.showTextFormat = true;
    this.showUndoRedo = true;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  handleActionTriggered(event) {
    this.executeToolbarCommand.emit({ command: event.detail.command, value: event.detail.value });
  }
  handleClickPreview() {
    this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.PREVIEW });
  }
  renderArrows() {
    if (!this.showUndoRedo)
      return;
    return (h("div", { id: "rich-toolbar-undo-redo", class: "taskbar-group" }, h("ez-rich-toolbar-arrows", null)));
  }
  renderLetters() {
    if (!this.showTextFormat)
      return;
    return (h("div", { id: "rich-toolbar-text-format", class: "taskbar-group" }, h("ez-rich-toolbar-letters", null)));
  }
  renderConfigs() {
    if (!this.showConfigs)
      return;
    return (h("div", { id: "rich-toolbar-options-configs", class: "taskbar-group" }, h("ez-rich-toolbar-configs", null)));
  }
  renderPreview() {
    if (!this.showPreview)
      return;
    return (h("div", { class: "taskbar-group" }, h("span", { id: 'rich-text-preview-btn', class: "preview-btn", title: this.getPreviewTitle(), onClick: this.handleClickPreview.bind(this) }, this.isPreviewMode ? this.i18n("ez-rich-text.edit") : this.i18n("ez-rich-text.preview"))));
  }
  getPreviewTitle() {
    return this.isPreviewMode
      ? this.i18n("ez-rich-text.title.edit")
      : this.i18n("ez-rich-text.title.preview");
  }
  render() {
    return (h(Host, null, h("div", { class: "taskbar" }, this.renderPreview(), this.renderArrows(), this.renderLetters(), this.renderConfigs())));
  }
  static get is() { return "ez-rich-toolbar"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-rich-toolbar.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-rich-toolbar.css"]
    };
  }
  static get properties() {
    return {
      "showPreview": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Informa se as op\u00E7\u00F5es a op\u00E7\u00E3o de pr\u00E9-visualiza\u00E7\u00E3o deve ser apresentada."
        },
        "attribute": "show-preview",
        "reflect": false,
        "defaultValue": "true"
      },
      "isPreviewMode": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Informa se o editor est\u00E1 em modo preview."
        },
        "attribute": "is-preview-mode",
        "reflect": false,
        "defaultValue": "false"
      },
      "showConfigs": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Informa se as op\u00E7\u00F5es de configura\u00E7\u00F5es (lista, imagem e link) devem ser apresentadas."
        },
        "attribute": "show-configs",
        "reflect": false,
        "defaultValue": "true"
      },
      "showTextFormat": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Informa se as op\u00E7\u00F5es de formata\u00E7\u00E3o de texto (it\u00E1lico, sublinhado e negrito) devem ser apresentadas."
        },
        "attribute": "show-text-format",
        "reflect": false,
        "defaultValue": "true"
      },
      "showUndoRedo": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Informa se as op\u00E7\u00F5es de desfazer e refazer devem ser apresentadas."
        },
        "attribute": "show-undo-redo",
        "reflect": false,
        "defaultValue": "true"
      }
    };
  }
  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": "./RichToolbarHelper"
            }
          }
        }
      }];
  }
  static get listeners() {
    return [{
        "name": "actionTriggered",
        "method": "handleActionTriggered",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
