import { h, Component } from 'preact';
import PropTypes from 'prop-types';

export default class CodeEditor extends Component {

  componentDidMount() {
    import('codemirror')
    .then(CodeMirror => {
      const editor = document.getElementById("codeeditor");
      const myCodeMirror = CodeMirror(editor, {
        mode:  "javascript",
        theme: "material",
        autofocus: true,
      });
      myCodeMirror.setSize("100%", "100%");
      //Initial trigger:
      const channel = window.pusher.channel(`presence-channel-${this.props.activeChannelId}`)
      channel.trigger('client-livecode', {
        context: 'initializing-live-code-channel',
        channel: `presence-channel-${this.props.activeChannelId}`
      });
      //Coding trigger:
      myCodeMirror.on('keyup', cm => {
          channel.trigger('client-livecode', {
            keyPressed: true,
            value: cm.getValue(),
            cursorPos: cm.getCursor(),
          });
      });
    });
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {

    return <div id="codeeditor" className="chatcodeeditor">
      <div className="chatcodeeditor__header">Experimental (WIP)</div>
    </div>

  }

}