import React, { Component } from "react";
import Meditor from "./m_editor";
import "./index.css";
import { Input } from "antd";
import FileLanguage from '../Component/FileLanguage';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorValue: "",
      filename: "",
      language: undefined
    };
  }

  // 命名文件
  changeFileName = (e) => {
    this.setState({
      filename: e.target.value,
    });
  };
  // 取消，弹框询问
  CancelAddFile = () => {
    this.props.history.goBack();
  };

  select_language = (e) => {
    console.log(e)
    this.setState({
      language: e
    })

  }

  render() {
    const { pathname } = this.props.location;
    const { filename, language } = this.state;
    const urlroot = pathname.split("newfile")[1];
    const file_path = `${urlroot}/${filename}`;
    const { projectDetail } = this.props;
    
    return (
      <React.Fragment>
        <div className="main">
          <p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">
            新建文件
          </p>
          <div>
            <div className="grid-item mb20">
              <div className="grid-item">
                <div className="setInputAddon">
                  <Input
                    addonBefore={`/${
                      projectDetail && projectDetail.identifier
                    }${urlroot}/`}
                    value={filename}
                    onChange={this.changeFileName}
                    placeholder="命名文件..."
                  />
                </div>
                <a onClick={this.CancelAddFile} className="color-blue">
                  取消
                </a>
              </div>
              <div  className="text-right">
                <FileLanguage  language={language} select_language={this.select_language}></FileLanguage>
              </div>
            </div>
            <Meditor
              {...this.props}
              {...this.state}
              filepath={`${file_path}`}
              language = {language}
              content={undefined}
              readOnly={false}
              editorType="new"
            ></Meditor>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default Index;
