import React, { Component } from "react";
import Editor from "react-monaco-editor";
// import {UnControlled as CodeMirror} from 'react-codemirror2'

import UserSubmitComponent from "./UserSubmitComponent";

import "./index.css";
import "./editor.css";

class m_editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorValue: this.props.content,
      prevHeight:0
    };
  }
  componentDidUpdate=(prevProps)=>{
    if(prevProps && this.props && this.props.content !== prevProps.content){
      this.setState({
        editorValue:this.props.content
      })
    }
  }
  changeEditor = (editorValue) => {
    this.setState({
      editorValue,
    });
  };

  render() {
    const { editorValue } = this.state;
    const { readOnly, editorType, language , currentBranch , descName } = this.props;
    const editor_options = {
      lineNumbers: "on",
      wordWrap: true, //强制换行
      selectOnLineNumbers: true,
      lineHeight: 24,
      renderLineHighlight: "line",
      revealHorizontalRightPadding: 5,
      placeholder:"请输入内容",
      readOnly: readOnly,
      cursorStyle: readOnly ? "underline-thin" : "line",
      folding: true,
      foldingStrategy: "indentation", // 代码可分小段折叠
      automaticLayout: true, // 自适应布局
      overviewRulerBorder: false, // 不要滚动条的边框
      scrollBeyondLastLine: false, // 取消代码后面一大段空白
      minimap: {
        // 不要小地图
        enabled: false,
      },
    };

    const handleEditorMount = (editor, monaco) => {
      editor.onDidChangeModelDecorations(() => {
          requestAnimationFrame(updateEditorHeight); // folding
      });

      const updateEditorHeight = () => {
          const editorElement = editor.getDomNode();

          if (!editorElement) {
              return;
          }

          const padding = 40;

          const lineHeight = editor.getOption(
              monaco.editor.EditorOption.lineHeight
          );

          const lineCount = editor.getModel().getLineCount() || 1;
          let height =
              editor.getTopForLineNumber(lineCount + 1) +
              lineHeight +
              padding ;

          if(height<400){height = 400;} 

          if (this.state.prevHeight !== height) {
            this.setState({
              prevHeight:height
            })
              // setPrevHeight(height);
              editorElement.style.height = `${height}px`;
              editor.layout();
          }
      };

      updateEditorHeight(); // typing
  };


    return (
      <React.Fragment>
        <div className="editorBorderBox">
          <Editor
            language={language ? language : "plaintext"}
            theme={"vs-grey"}
            placeholder="请输入内容"
            value={editorValue}
            options={editor_options}
            onChange={this.changeEditor}
            editorWillMount={this.editorWillMount}
            editorDidMount={handleEditorMount}
          />
          {/* <CodeMirror
            value={editorValue}
            options={{
              theme: 'monokai',
              mode: 'JavaScript',
              extraKeys: {"Ctrl": "autocomplete"},//ctrl可以弹出提示
              styleActiveLine: true,
              lineNumbers: true,
              readOnly:true
            }}
          /> */}
        </div>
        {!readOnly && (
          <div className="editorBorderSubmitBox" style={{marginTop:"20px",padding:"20px"}}>
            <UserSubmitComponent
              {...this.props}
              {...this.state}
              filepath={`${this.props.filepath}`}
              content={editorValue}
              editor_type={editorType}
              currentBranch={currentBranch}
              descName={descName}
            ></UserSubmitComponent>
            </div>
        )}
      </React.Fragment>
    );
  }
}
export default m_editor;
