import { Component, h, Host, Method, Prop, Element, Event } from '@stencil/core';
import * as monaco from 'monaco-editor';
import { escapeCode, unescapeCode } from '../utils/code.utils';
export class MonacoEditor {
  constructor() {
    this.defaultOptions = {
      language: 'javascript',
      scrollBeyondLastLine: false,
      readOnly: false,
      theme: 'vs-light',
      minimap: {
        enabled: false
      },
      automaticLayout: true
    };
  }
  componentDidLoad() {
    const slottedCode = this.el.querySelector(':scope > *:first-of-type');
    this.editor = monaco.editor.create(this.div, Object.assign(Object.assign({ value: unescapeCode((slottedCode === null || slottedCode === void 0 ? void 0 : slottedCode.innerHTML.trim()) || '') }, this.defaultOptions), (this.options || {})));
    this.editorDidLoad.emit();
  }
  disconnectedCallback() {
    var _a;
    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.dispose();
  }
  async setFocus() {
    var _a;
    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
  }
  async save() {
    var _a;
    return escapeCode((_a = this.editor) === null || _a === void 0 ? void 0 : _a.getValue());
  }
  render() {
    return (h(Host, null,
      h("article", { ref: (el) => (this.div = el) })));
  }
  static get is() { return "deckgo-monaco-editor"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["monaco-editor.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["monaco-editor.css"]
  }; }
  static get properties() { return {
    "options": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "MonacoEditorOptions",
        "resolved": "MonacoEditorOptions",
        "references": {
          "MonacoEditorOptions": {
            "location": "import",
            "path": "../types/options"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get events() { return [{
      "method": "editorDidLoad",
      "name": "editorDidLoad",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "save": {
      "complexType": {
        "signature": "() => Promise<string | undefined>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<string>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
