import React, { Component, Fragment } from "react";
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/addon/selection/active-line.js';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/css/css';
import UserSubmitComponent from "./UserSubmitComponent";
import CloudIDE from "./cloudIDE";

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

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

  render() {
    const { editorValue, changeValue } = this.state;
    console.log("editorValue:",editorValue)
    const { readOnly, editorType,onEmpty,filename,empty, currentBranch, descName, checkName, detail, match: { params },filepath,ideTheme } = this.props;
    const editor_options = {
      lineNumbers: "on",
      lineWrapping: 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, // 取消代码后面一大段空白
      styleActiveLine: true,//光标代码高亮
      minimap: {
        // 不要小地图
        enabled: false,
      },
    };

    let download_url = detail && detail.download_url;
    return (
      <Fragment>
        <div className="editorBorderBox">
          {!readOnly ?
            <CodeMirror
              placeholder="请输入内容"
              value={editorValue}
              options={editor_options}
              onChange={this.changeEditor}
            /> :
            <CloudIDE download_url={download_url} value={editorValue} params={params} filepath={filepath&&filepath.startsWith('/')?filepath.slice(1):filepath}/>
          }
        </div>
        {!readOnly && (
          <div className="editorBorderSubmitBox" style={{ padding: "20px" }}>
            <UserSubmitComponent
              {...this.props}
              {...this.state}
              filepath={`${this.props.filepath}`}
              content={changeValue}
              editor_type={editorType}
              currentBranch={currentBranch}
              descName={descName}
              checkName={checkName}
              onEmpty={onEmpty}
              empty={empty}
              filename={filename}
            ></UserSubmitComponent>
          </div>
        )}
      </Fragment>
    );
  }
}
export default m_editor;
