import { Widget } from '@lumino/widgets';

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/lua/lua.js';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
// import 'codemirror/lib/codemirror.css';
// import 'codemirror/theme/monokai.css';

const TIC_SPECIALS = ["TIC", "SCN", "OVR", "btn", "btnp", "clip", "cls", "circ", "circb", "exit", "fget", "font", "fset", "key", "keyp", "line", "map", "memcpy", "memset", "mget", "mouse", "mset", "music", "peek", "peek4", "pix", "pmem", "poke", "poke4", "print", "rect", "rectb", "reset", "sfx", "spr", "sync", "time", "tstamp", "trace", "tri", "textri"],
    CM_OPTS = {
        mode: {'name': 'lua', 'specials': TIC_SPECIALS, 'fold': true},
        // mode: {'name': 'lua'},
        theme: 'default',
        lineNumbers: true,
        lineWrapping: true,
        // extraKeys: {"Ctrl-S": function(cm){ save(); }},
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]    
    };

export class EditorWidget extends Widget {

  static createNode() {
    let node = document.createElement('div');
    let editor = document.createElement('div');

    // let input = document.createElement('input');
    // input.placeholder = 'Placeholder...';
    // content.appendChild(input);
    node.appendChild(editor);
    return node;
  }

  constructor(name) {
    super({ node: EditorWidget.createNode() });
    // let editor_div = this.node.getElementsByTagName('div')[0];
    this.cm = CodeMirror(this.editorDiv, CM_OPTS);
    // window.code = this.cm;
    this.setFlag(Widget.Flag.DisallowLayout);
    this.addClass('content');
    this.addClass(name.toLowerCase());
    this.title.label = name;
    this.title.closable = false;
    this.title.caption = `Editor: ${name}`;
  }

  get editorDiv () {
    return this.node.getElementsByTagName('div')[0];
  }

  get inputNode() {
    return this.node.getElementsByTagName('input')[0];
  }
  setValue (text) {
    this.cm.setValue(text);
    // this.cm.update();
  }
  getValue () {
    return this.cm.getValue();
  }
  // onUpdateRequest (Message) {
  // }
  onAfterShow () {
    //console.log("editor.onAfterShow");
    this.cm.refresh();
  }
  onActivateRequest(Message) {
    // if (this.isAttached) {
    //   this.inputNode.focus();
    // }
  }
}