import React, { Component } from 'react';
import { ActionBtn } from 'educoder'

import { Form , Modal , Input , Breadcrumb , Button } from 'antd'

import { Link } from 'react-router-dom'

import axios from 'axios'
import Bottomsubmit from "../../../modals/Bottomsubmit";

/**
        ---------------------------- START
 */
function getModeByMirrorName(mirror_name) {
  let mode = 'javascript'
  if (mirror_name && mirror_name.length) {
      for (let i = 0; i < mirror_name.length; i++) {
          let modeVal = mirrorNameModeMap[mirror_name[i]];
          if (modeVal) {
              mode = modeVal;
              break;
          }
      }
  }
  return mode;
}
const _extraKeys = {"Alt-/": "autocomplete"};
function createCMOptions(mirror_name) {
  let mode = getModeByMirrorName(mirror_name)

  let cmOptions = {
      lineNumbers: true,
      mode: mode,
      theme: "railscasts",
      indentUnit:4,
      matchBrackets: true,
      autoRefresh: true,
      smartIndent: true,//智能换行
      extraKeys: _extraKeys,
      autofocus: true,
      styleActiveLine: true,
      lint: true,
      gutters: ["CodeMirror-linenumbers", "breakpoints", "CodeMirror-lint-markers"]
  };
  return cmOptions;
}

const mirrorNameModeMap = {
  'JFinal': 'text/x-java',
  'Java': 'text/x-java',
  'Kotlin': 'text/x-kotlin',
  'C/C++' : 'text/x-c++src',
  'MachineLearning': {
              name: "python",
              version: 3,
              singleLineStringErrors: false
  },
  'Python2.7': {
              name: "python",
              version: 3,
              singleLineStringErrors: false
  },
  'Python3.6': {
              name: "python",
              version: 3,
              singleLineStringErrors: false
  },
}
/**
      ---------------------------- END
*/

class RepositoryAddFile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      path:"",
      gotppath:""
    }
  }

  componentDidMount(){

    if(this.props.newathArray){
      if(this.props.newathArray.length>0){
        let newfilspath="";
        let list=this.props.newathArray;
        list.map((item,key)=>{
          if(key===0){
            newfilspath=item;
          }else{
            newfilspath=newfilspath+'/'+item;
          }
        })
        this.setState({
          path:newfilspath,
          gotppath:newfilspath
        })

        this.props.form.setFieldsValue({
          path: newfilspath,
        });
      }
    }
    let cmOptions = createCMOptions(this.props.mirror_name)
    const extend_editor = window.CodeMirror.fromTextArea(window.$('#codemirror-file-edit')[0]
        , cmOptions);

    // tpi没setValue也可以
    extend_editor.setValue('')
    extend_editor.refresh();

    // 拖拽也需要用 ： window.editor_CodeMirror.refresh()
    window.editor_tempCodeMirror = extend_editor;
    this.extend_editor = extend_editor;
  }

  checkPath= (rule, value, callback) =>{
    if(!value){
      callback('文件名不能为空');
    }else if (value == "/" || value.indexOf('.') == -1 ) {
      callback('请输入正确的文件路径，如：src/HelloWorld.java');
    }else{
      callback();
    }
  }

  handleSubmit = () =>{
    let matchpath =this.props.match.path;

    let Repositoryflag =false;

    if( matchpath.indexOf("repository")>-1){
      Repositoryflag =false;
    }
    if(matchpath.indexOf("secret_repository")>-1){
      Repositoryflag =true;
    }
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        let shixunId = this.props.match.params.shixunId;
        let url = `/shixuns/${shixunId}/add_file.json`
        axios.post(url,{
          path:values.path,
          message:values.message,
          content:this.extend_editor.getValue(),
          secret_repository:Repositoryflag===false?undefined:Repositoryflag
        }).then((result)=>{
          if(result){
            this.props.history.replace(`${Repositoryflag===true?`/shixuns/${shixunId}/secret_repository`:`/shixuns/${shixunId}/repository`}${this.state.gotppath===""?"":"/master/shixun_show/"+this.state.gotppath}`)
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    })
  }
  setinput=(e)=>{
    this.setState({
      path:e.target.value
    })
    this.props.form.setFieldsValue({
      path:e.target.value,
    });
  }
  render(){
    const {getFieldDecorator} = this.props.form;
    let { shixunId } = this.props.match.params;

    let matchpath =this.props.match.path;
    let Repositoryflag ="";
    if( matchpath.indexOf("repository")>-1){
      Repositoryflag ="repository";
    }
    if(matchpath.indexOf("secret_repository")>-1){
      Repositoryflag ="secret_repository";
    }

    return(
      <div>
        <div className="educontent mt30">
        <style>
          {`
            .formStyle .ant-form-item{
              margin-bottom:10px!important;
            }
            .formStyle .ant-col.ant-form-item-label{
              margin-left:-10px;
              line-height:30px;
              margin-bottom:10px;
            }
            .breadcrumb .ant-breadcrumb-separator{
              margin:0px 2px;
            }
            // .backgroudwhite{
            //  display:none;
            // }
            /*.filecode .CodeMirror.cm-s-railscasts{
              border:1px solid #E5E5E5;
            }
            .filecode .CodeMirror.cm-s-railscasts .CodeMirror-sizer,.filecode .CodeMirror-gutters,.filecode .CodeMirror-scroll{
              background:#fff;
            }
            .filecode .CodeMirror-linenumber{
              text-align:center
            }*/
          `}
        </style>
        {/*<p className="mt10 mb10">*/}
        {/*  <Breadcrumb separator='>' className="breadcrumb">*/}
        {/*    <Breadcrumb.Item href='/shixuns'>实训项目</Breadcrumb.Item>*/}
        {/*    <Breadcrumb.Item href={`/shixuns/${shixunId}/repository`}>版本库</Breadcrumb.Item>*/}
        {/*    <Breadcrumb.Item>添加新文件</Breadcrumb.Item>*/}
        {/*  </Breadcrumb>*/}
        {/*</p>*/}
        <Form onSubmit={this.handleSubmit} className="formStyle">
          <style>
            {
              `
              .padding20-30{
                padding:20px 30px 60px 30px;
              }
              .formStyle .ant-form-item{
                margin-bottom:0px !important;
                height:60px;
              }
              `
            }
          </style>
          <div className="edu-back-white padding20-30">
            <p className="ant-form-item-label">
              <div className={"font-20 color-black"}>新建文件</div>
            </p>


            <div className={" mb50"}>
              <Form.Item  label="文件名称或文件路径">
              {getFieldDecorator('path', {
                rules: [{
                  required: true, message: '请输入文件名称或文件路径',
                },{
                  whitespace: true, message: '请勿输入空格'
                }],
              })(
                <span>
                      <span> </span><span><Input value={this.state.path} placeholder="请输入文件名称或文件路径" className="fl"  style={{ width: 240 }} size="large" onInput={(e)=>this.setinput(e)}/></span><span className={" ml10 fl"}>
                  提示：1.输入文件名可以创建一个新文件；2.输入新文件夹名/新文件名可以创建新文件夹和新文件。（如：step1/HelloWorld.java）</span>
                </span>
              )}
            </Form.Item>

            </div>

          <style>
            {
              `
              .padding30{
                padding:0px 30px 30px 30px;
              }
              `
            }
          </style>


            <div className="mt10 mb25 repoCMWrapper filecode">
              <textarea className="" id="codemirror-file-edit" style={{display:'none'}} name="content"></textarea>
            </div>
            <Form.Item label="提交信息">

              {getFieldDecorator('message', {
                rules: [{
                  required: true, message: '请输入提交信息',
                },{
                  whitespace: true, message: '请勿输入空格'
                }],
              })(
                <Input placeholder="请输入本次提交的主要信息，合理的描述信息有利于代码历史记录的管理" size="large" className="winput-300-35 fl "/>
              )}
            </Form.Item>
            {/*<Form.Item label="提交信息">*/}
            {/*  {getFieldDecorator('message', {*/}
            {/*    rules: [{required: true, message: "请输入提交信息"}],*/}
            {/*  })(*/}
            {/*    <textarea className="winput-100-130 fl"></textarea>*/}
            {/*  )}*/}
            {/*</Form.Item>*/}
          </div>
          <div className="clearfix mt30 edu-txt-right mb30">
            {/*<Button type="primary" className="defalutSubmitbtn fr ml20" onClick={this.handleSubmit}>提交</Button>*/}
            {/*<Link className="defalutCancelbtn fr" to={`/shixuns/${shixunId}/repository`}>取消</Link>*/}

          </div>
        </Form>
        </div>
        <Bottomsubmit {...this.props} {...this.state} url={`/shixuns/${shixunId}/${Repositoryflag}${this.state.gotppath===""?"":"/master/shixun_show/"+this.state.gotppath}`}  onSubmits={() => this.handleSubmit()}/>

        {/*<Bottomsubmit {...this.props} {...this.state} url={`/shixuns/${shixunId}/${Repositoryflag}`} onSubmits={() => this.handleSubmit()}/>*/}
      </div>
    )
  }
}
const WrappedRepositoryAddFile = Form.create({name: 'taskRepositoryAddFile'})(RepositoryAddFile);
// RouteHOC()
export default (WrappedRepositoryAddFile);