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 ScriptDiffEditor = function ScriptDiffEditor(_ref) {
  var language = _ref.language,
    value = _ref.value,
    originalValue = _ref.originalValue,
    theme = _ref.theme,
    className = _ref.className,
    options = _ref.options;
  var ref = useRef();
  var editorRef = useRef();
  var inViewPort = useInViewport(ref);
  var updateModel = function updateModel() {
    var originalModel = MonacoEditor.editor.createModel(originalValue, language);
    var modifiedModel = MonacoEditor.editor.createModel(value, language);
    editorRef.current.setModel({
      original: originalModel,
      modified: modifiedModel
    });
  };
  var init = function init() {
    editorRef.current = MonacoEditor.editor.createDiffEditor(ref.current, _extends({
      readOnly: true,
      theme: theme,
      contextmenu: false
    }, options));
    updateModel();
  };
  var destroy = function destroy() {
    if (editorRef.current) {
      //使用完成销毁实例
      var _editorRef$current$ge = editorRef.current.getModel(),
        original = _editorRef$current$ge.original,
        modified = _editorRef$current$ge.modified;
      if (original) {
        original.dispose();
      }
      if (modified) {
        modified.dispose();
      }
      editorRef.current.dispose();
    }
  };
  useEffect(function () {
    init();
    return destroy;
  }, []);
  useUpdateEffect(function () {
    updateModel();
  }, [language, originalValue, value]);
  useUpdateEffect(function () {
    editorRef.current.updateOptions({
      theme: theme
    });
  }, [theme]);
  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 ScriptDiffEditor;
ScriptDiffEditor.propTypes = {
  language: PropTypes.string,
  value: PropTypes.string,
  originalValue: PropTypes.string,
  theme: PropTypes.string,
  className: PropTypes.string,
  options: PropTypes.object
};
ScriptDiffEditor.defaultProps = {
  originalValue: '',
  value: '',
  theme: 'vs'
};