import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
export class DvnFieldInputCellRichContent {
  constructor() {
    this.isConfirmationDialogShown = false;
  }
  async focus() {
    var _a, _b;
    (_b = (_a = this.el.querySelector('dvn-input')) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
  }
  ;
  render() {
    const { field, value } = this;
    const editorValue = value || {
      version: '0.0.1',
      content: [{
          type: 'text',
          id: 'form-content',
          value: {
            placeholder: field.placeholder,
            text: '',
          },
        }]
    };
    return (h(Host, null,
      h("dvn-side-modal", { shown: true, onDismiss: () => {
          var _a, _b;
          if (JSON.stringify((_a = this.value) === null || _a === void 0 ? void 0 : _a.content) !== JSON.stringify((_b = this.internalValue) === null || _b === void 0 ? void 0 : _b.content)) {
            this.isConfirmationDialogShown = true;
          }
          else {
            this.cellFormCancel.emit();
          }
        } },
        h("div", { class: "flex-grow-1 d-flex flex-column mt-3" },
          h("div", { class: "flex-grow-1" },
            h("dvn-rich-editor", { key: "editor", onChange: (e) => {
                e.stopImmediatePropagation();
                const editorValue = e.detail;
                this.internalValue = {
                  version: '0.0.1',
                  content: editorValue,
                };
              }, editorSettings: field.settings || defaultSettings, value: editorValue.content })),
          h("div", { class: "form-footer" },
            h("dvn-button", { leaned: true, onClick: (e) => {
                e.stopImmediatePropagation();
                this.cellFormSubmit.emit({ value: this.internalValue });
                this.cellFormCancel.emit();
              } }, "Save")))),
      h("dvn-dialog", { shown: this.isConfirmationDialogShown, title: "You have unsaved changes" },
        "You're going to loose the changes if you don't save.",
        h("div", { slot: "actions" },
          h("dvn-button", { tint: "danger", view: "flat", onClick: (e) => {
              e.stopImmediatePropagation();
              this.cellFormCancel.emit();
            } }, "Discard Changes"),
          h("dvn-button", { view: "flat", onClick: () => this.isConfirmationDialogShown = false }, "Cancel")))));
  }
  static get is() { return "dvn-field-input-cell-rich-content"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-field-input-cell-rich-content.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-field-input-cell-rich-content.css"]
  }; }
  static get properties() { return {
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false
    },
    "field": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "RichContentField",
        "resolved": "RichContentField",
        "references": {
          "RichContentField": {
            "location": "import",
            "path": "@dvn/core/doldurma/src/fields/rich-content/rich-content"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "errors": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "any[]",
        "resolved": "any[]",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "RichContentValue",
        "resolved": "RichContentValue",
        "references": {
          "RichContentValue": {
            "location": "import",
            "path": "@dvn/core/doldurma/src/fields/rich-content/rich-content"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "internalValue": {},
    "isConfirmationDialogShown": {}
  }; }
  static get events() { return [{
      "method": "cellFormCancel",
      "name": "cellFormCancel",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "cellFormSubmit",
      "name": "cellFormSubmit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "focus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
const defaultSettings = {
  enableDrag: false,
  enableBlockCreation: false,
  enableBlockDeletion: false,
  hideDragControls: true,
  blockTypes: [],
  blockSettings: {
    text: {
      textSelectionOptions: ['bold', 'link']
    }
  }
};
