import * as React from 'react';
import * as monaco from 'monaco-editor';

import './index.less';

export interface IEditorProps {
  style?: React.CSSProperties;
  options: monaco.editor.IStandaloneEditorConstructionOptions;
  uri?: monaco.Uri;
  autoUnmount?: boolean;
  customMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => any;
  placeholder?: string;
}

export class EditorCom extends React.Component<IEditorProps> {
  public ref: HTMLElement = null;
  public editor: monaco.editor.IStandaloneCodeEditor;
  public state = {
    placeholder: this.props.placeholder ?? '',
  };

  public componentWillUnmount() {
    if (this.props.autoUnmount === false) return;
    const model = this.editor.getModel();
    model.dispose();
    this.editor.dispose();
  }

  public componentDidMount() {
    const { customMount, options, uri } = this.props;
    const { value, language } = options;
    if (uri) {
      options.model = monaco.editor.createModel(value, language, uri);
    }

    this.editor = monaco.editor.create(this.ref,
      options,
    );
    if (customMount) customMount(this.editor, monaco);
  }

  public render() {
    const { style } = this.props;
    return (
      <>
        <div style={style} className="editor" ref={(id) => { this.ref = id; }} />
      </>
    );
  }
}