import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { useUpdateEffect } from 'ahooks';
// import * as MonacoEditor from 'monaco-editor';

import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';
import { useInViewport } from 'ahooks';
setLocaleData(zh_CN);

// // You must import/require after `setLocaleData`
// // Do not use `import * as monaco from 'XXX'`, but can use `import('xxx').then(XXX)`
var MonacoEditor = require('monaco-editor');
var ScriptEditor = function ScriptEditor(_ref) {
  var language = _ref.language,
    value = _ref.value,
    readOnly = _ref.readOnly,
    theme = _ref.theme,
    onChange = _ref.onChange,
    className = _ref.className,
    options = _ref.options;
  var ref = useRef();
  var editorRef = useRef();
  var onChangeSubscribeRef = useRef();
  var inViewPort = useInViewport(ref);
  // 外部设置value时，阻止内部onChange触发
  var preventTriggerChangeEventRef = useRef(false);
  var init = function init() {
    editorRef.current = MonacoEditor.editor.create(ref.current, _extends({
      value: value,
      language: language,
      contextmenu: false,
      minimap: {
        enabled: false
      },
      readOnly: readOnly,
      theme: theme
    }, options));
    onChangeSubscribeRef.current = editorRef.current.onDidChangeModelContent(function () {
      if (onChange && !preventTriggerChangeEventRef.current) {
        onChange(editorRef.current.getValue());
      }
    });
  };
  var destroy = function destroy() {
    if (editorRef.current) {
      //使用完成销毁实例
      editorRef.current.dispose();
      var model = editorRef.current.getModel();
      if (model) {
        model.dispose();
      }
    }
    if (onChangeSubscribeRef.current) {
      onChangeSubscribeRef.current.dispose();
    }
  };
  useEffect(function () {
    init();
    return destroy;
  }, []);
  useUpdateEffect(function () {
    MonacoEditor.editor.setModelLanguage(editorRef.current.getModel(), language);
  }, [language]);
  useUpdateEffect(function () {
    editorRef.current.updateOptions({
      readOnly: readOnly,
      theme: theme
    });
  }, [readOnly, theme]);
  useUpdateEffect(function () {
    var model = editorRef.current.getModel();
    if (value !== model.getValue()) {
      preventTriggerChangeEventRef.current = true;
      editorRef.current.pushUndoStop();
      model.pushEditOperations([], [{
        range: model.getFullModelRange(),
        text: value
      }]);
      editorRef.current.pushUndoStop();
      preventTriggerChangeEventRef.current = false;
    }
  }, [value]);
  useEffect(function () {
    if (inViewPort && editorRef && editorRef.current && editorRef.current.updateOptions) {
      editorRef.current.updateOptions({
        theme: theme
      });
    }
  }, [inViewPort]);
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    style: {
      height: '100%'
    },
    className: className
  });
};
export default ScriptEditor;
ScriptEditor.propTypes = {
  language: PropTypes.string,
  value: PropTypes.string,
  readOnly: PropTypes.bool,
  theme: PropTypes.string,
  onChange: PropTypes.func,
  className: PropTypes.string,
  options: PropTypes.object
};
ScriptEditor.defaultProps = {
  value: '',
  readOnly: false,
  theme: 'vs'
};