import { Component, Event, h, Host, Prop, State } from '@stencil/core';
import { Editor } from '@tiptap/core';
import CharacterCount from '@tiptap/extension-character-count';
import Placeholder from '@tiptap/extension-placeholder';
import StarterKit from '@tiptap/starter-kit';
import { __, sprintf } from '@wordpress/i18n';
let id = 0;
export class ScRichText {
  constructor() {
    this.inputId = `sc-richtext-${++id}`;
    this.helpId = `sc-richtext-help-text-${id}`;
    this.labelId = `sc-richtext-label-${id}`;
    /** The textarea's size. */
    this.size = 'medium';
    /** The textarea's value attribute. */
    this.value = '';
    /** The textarea's label. Alternatively, you can use the label slot. */
    this.label = '';
    /** Should we show the label */
    this.showLabel = true;
    /** The textarea's help text. Alternatively, you can use the help-text slot. */
    this.help = '';
    /** Disables the textarea. */
    this.disabled = false;
    /** Makes the textarea readonly. */
    this.readonly = false;
    /** Makes the textarea a required field. */
    this.required = false;
    this.updatedAt = Date.now();
  }
  componentDidLoad() {
    if (this.editor)
      return;
    this.editor = new Editor({
      element: this.element,
      extensions: [
        StarterKit,
        Placeholder.configure({
          // Use a placeholder:
          placeholder: this.placeholder,
        }),
        ...((this === null || this === void 0 ? void 0 : this.maxlength) > 0
          ? [
            CharacterCount.configure({
              limit: this.maxlength,
              mode: 'nodeSize',
            }),
          ]
          : []),
      ],
      content: this.value,
      onCreate: ({ editor }) => {
        this.value = editor.getHTML();
      },
      onUpdate: ({ editor }) => {
        this.value = editor.getHTML();
        this.scInput.emit();
        this.scChange.emit();
      },
      onSelectionUpdate: () => {
        this.updatedAt = Date.now();
      },
      onFocus: () => {
        this.handleFocus();
      },
      onBlur: () => {
        this.handleBlur();
      },
    });
  }
  handleFocus() {
    this.hasFocus = true;
    this.scFocus.emit();
  }
  handleBlur() {
    this.hasFocus = false;
    this.scBlur.emit();
  }
  isActive(type, opts = {}) {
    var _a, _b;
    return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive) === null || _b === void 0 ? void 0 : _b.call(_a, type, opts);
  }
  toggleHeading(opts) {
    this.editor.chain().toggleHeading(opts).focus().run();
  }
  toggleBold() {
    this.editor.chain().toggleBold().focus().run();
  }
  toggleItalic() {
    this.editor.chain().toggleItalic().focus().run();
  }
  can(property) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    return (_j = (_h = (_g = (_f = (_e = (_d = (_c = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.can()) === null || _b === void 0 ? void 0 : _b.chain) === null || _c === void 0 ? void 0 : _c.call(_b)) === null || _d === void 0 ? void 0 : _d.focus) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f[property]) === null || _g === void 0 ? void 0 : _g.call(_f)) === null || _h === void 0 ? void 0 : _h.run) === null || _j === void 0 ? void 0 : _j.call(_h);
  }
  run(property) {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    return (_h = (_g = (_f = (_e = (_d = (_c = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.chain) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c)) === null || _e === void 0 ? void 0 : _e[property]) === null || _f === void 0 ? void 0 : _f.call(_e)) === null || _g === void 0 ? void 0 : _g.run) === null || _h === void 0 ? void 0 : _h.call(_g);
  }
  remainingCharacters() {
    var _a, _b;
    if (!this.maxlength)
      return 1000;
    return this.maxlength - (((_b = (_a = this === null || this === void 0 ? void 0 : this.editor) === null || _a === void 0 ? void 0 : _a.storage) === null || _b === void 0 ? void 0 : _b.characterCount.characters()) || 0);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    return (h(Host, null,
      h("sc-form-control", { exportparts: "label, help-text, form-control", size: this.size, required: this.required, label: this.label, showLabel: this.showLabel, help: this.help, inputId: this.inputId, helpId: this.helpId, labelId: this.labelId, name: this.name },
        h("div", { part: "base", class: { 'editor-base': true, 'editor--focused': this.hasFocus } },
          h("div", { class: "menu" },
            h("sc-button", { size: "small", type: ((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive) === null || _b === void 0 ? void 0 : _b.call(_a, 'bold')) ? 'default' : 'text', onClick: () => this.run('toggleBold'), disabled: !this.can('toggleBold') },
              h("sc-icon", { name: "bold" })),
            h("sc-button", { size: "small", type: ((_d = (_c = this.editor) === null || _c === void 0 ? void 0 : _c.isActive) === null || _d === void 0 ? void 0 : _d.call(_c, 'italic')) ? 'default' : 'text', onClick: () => this.run('toggleItalic'), disabled: !this.can('toggleItalic') },
              h("sc-icon", { name: "italic" })),
            h("sc-button", { size: "small", type: ((_f = (_e = this.editor) === null || _e === void 0 ? void 0 : _e.isActive) === null || _f === void 0 ? void 0 : _f.call(_e, 'bulletList')) ? 'default' : 'text', onClick: () => this.run('toggleBulletList') },
              h("sc-icon", { name: "list" })),
            h("sc-button", { size: "small", type: ((_h = (_g = this.editor) === null || _g === void 0 ? void 0 : _g.isActive) === null || _h === void 0 ? void 0 : _h.call(_g, 'strike')) ? 'default' : 'text', onClick: () => this.run('toggleStrike') },
              h("sc-icon", { name: "minus" })),
            h("sc-button", { class: "right", size: "small", type: "text", onClick: () => this.run('undo'), disabled: !this.can('undo') },
              h("sc-icon", { name: "corner-up-left" })),
            h("sc-button", { size: "small", type: "text", onClick: () => this.run('redo'), disabled: !this.can('redo') },
              h("sc-icon", { name: "corner-up-right" }))),
          h("div", { part: "editor", class: {
              editor: true,
            }, ref: el => (this.element = el) })),
        this.remainingCharacters() < 20 && h("div", { class: 'textarea__char-limit-warning' }, sprintf(__('%d characters remaining', 'surecart'), this.remainingCharacters())))));
  }
  static get is() { return "sc-rich-text"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-rich-text.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-rich-text.css"]
  }; }
  static get properties() { return {
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'medium' | 'large'",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The textarea's size."
      },
      "attribute": "size",
      "reflect": true,
      "defaultValue": "'medium'"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The textarea's name attribute."
      },
      "attribute": "name",
      "reflect": false
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The textarea's value attribute."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The textarea's label. Alternatively, you can use the label slot."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "showLabel": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should we show the label"
      },
      "attribute": "show-label",
      "reflect": false,
      "defaultValue": "true"
    },
    "help": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The textarea's help text. Alternatively, you can use the help-text slot."
      },
      "attribute": "help",
      "reflect": false,
      "defaultValue": "''"
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The textarea's placeholder text."
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "maxlength": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The max length."
      },
      "attribute": "maxlength",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Disables the textarea."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Makes the textarea readonly."
      },
      "attribute": "readonly",
      "reflect": true,
      "defaultValue": "false"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Makes the textarea a required field."
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "updatedAt": {},
    "hasFocus": {}
  }; }
  static get events() { return [{
      "method": "scChange",
      "name": "scChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "scInput",
      "name": "scInput",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "scBlur",
      "name": "scBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "scFocus",
      "name": "scFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
}
