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,
      checkName:false
    };
  }

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

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

  }

  checkFileName=(e)=>{
    let value = (e.target.value);
    //\需要单独判断
    const str = '!！@/:："“”<《》>|｜？？%';
    let reg = /\\/g;
    if(reg.test(value)){
      this.setState({
        checkName:true
      })
    }else{
      for(var i=0;i<str.length;i++){
        let s = str[i];
        if(value.indexOf(s) > -1){
          this.setState({
            checkName:true
          })
          return;
        }else{
          this.setState({
            checkName:false
          })
          continue;
        }
      }
    }
    
  }

  render() {
    const { pathname } = this.props.location;
    const { filename, language , checkName } = 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 mb30">
              <div className="grid-item">
                <div className={checkName?"setInputAddon red":"setInputAddon"}>
                  <Input
                    addonBefore={`/${ projectDetail && projectDetail.identifier }${urlroot}/`}
                    value={filename}
                    onChange={this.changeFileName}
                    placeholder="命名文件..."
                    onBlur={this.checkFileName}
                  />
                  {checkName ? <p style={{color:"red",position:'absolute'}}>文件名不能包含下列任何字符：\{`！@/:"<>|？%`}</p>:"" }
                </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>
            <div className="editorBorder">
              <Meditor
                {...this.props}
                {...this.state}
                filepath={`${file_path}`}
                language = {language}
                content={undefined}
                readOnly={false}
                editorType="new"
                descName={filename ? `Add ${filename}`:""}
                checkName={checkName}
              ></Meditor>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default Index;
