import React, { Component } from 'react';
import { Form , Upload , Input} from 'antd';
import axios from 'axios';
import {  getupload_git_file } from 'educoder';
import Repositoryfile from './Repositoryfile';
import Bottomsubmit from "../../../modals/Bottomsubmit";
import "./Repository.css"
const { Dragger } = Upload;
class RepositoryAddFileupload_files extends Component {
  constructor(props) {
    super(props);
    this.state={
      filspath:"",
      visibles:false,
      message:undefined,
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'xxx.png',
        //   status: 'done',
        //   url: 'http://www.baidu.com/xxx.png',
        // },
      ]
    }
  }

  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({
          filspath:newfilspath
        })
      }
    }


  }

  handleChange = (info) => {

    if (info.file.status === 'done'||info.file.status === "uploading") {

      let fileList = [...info.fileList];

      if(info.file.response){
        if(info.file.response.status===-1) {
          this.props.showNotification(info.file.response.message);
          return
        }else{
          this.props.showNotification("上传成功！");
          return;
        }
      }

      fileList = fileList.slice(-2);
      fileList = fileList.map(file => {
        if (file.response) {
          if (file.response.status===0) {
          }
        }
        return file;
      });

      this.setState({ fileList });
    }
  };

  onAttachmentRemove=(info)=>{
    console.log(info);
    if(info.response){
      let shixunId = this.props.match.params.shixunId;
      let {message,filspath}=this.state;
      if(message===""||message===undefined){
        this.props.showNotification('删除文件请先填写提交信息');
        return;
      }

      let matchpath =this.props.match.path;

      let Repositoryflag =undefined;

      if( matchpath.indexOf("repository")>-1){
        Repositoryflag =undefined;
      }
      if(matchpath.indexOf("secret_repository")>-1){
        Repositoryflag =true;
      }

      let newfilspath=filspath;

      if(newfilspath===""){
        newfilspath=info.name
      }else{
        newfilspath=filspath+"/"+info.name
      }
      const url = `/shixuns//${shixunId}/delete_git_file.json`;
      axios.delete(url, { data: {
        path:newfilspath,
        message:message,
        secret_repository:Repositoryflag
      }})
      .then((response) => {
        if (response.data.status === 0) {
          let fileList = this.state.fileList.filter(item=>item.uid !== info.uid);
          this.setState({
            fileList
          })
          this.props.showNotification("删除成功");
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    }else{
      this.props.showNotification("还未上传完成，无法进行删除操作！");
    }
  }

  FormInput=(e)=>{
    this.setState({
      message:e.target.value
    })
  }

  Selectfiledirectory=()=>{
    this.setState({
      visibles:true
    })
  }

  hideNewFolder=()=>{
    this.setState({
      visibles:false
    })
  }

  selectupfilspath=(value)=>{
   this.setState({
     filspath:value
   })
  }
  render(){
    const {getFieldDecorator} = this.props.form;
    let { shixunId } = this.props.match.params;
    // const props = {
    //   height:300,
    //   // name: 'file',
    //   multiple: true,
    //
    //   action: `${getUploadActionUrl()}`,
    //   onChange: this.handleChange,
    //   onRemove: this.onAttachmentRemove,
    //   // beforeUpload: (file) => {
    //   //   console.log('beforeUpload', file.name);
    //   //   const isLt150M = file.size / 1024 / 1024 < 150;
    //   //   if (!isLt150M) {
    //   //     this.props.showNotification('文件大小必须小于150MB!');
    //   //   }
    //   //   return isLt150M;
    //   // },
    // };
    let matchpath =this.props.match.path;

    let Repositoryflag ="";
    let newdata;

    if( matchpath.indexOf("repository")>-1){
      Repositoryflag ="repository";
      newdata={
        path:this.state.filspath,
        message:this.state.message,
      }
    }

    if(matchpath.indexOf("secret_repository")>-1){
      Repositoryflag ="secret_repository";
      newdata={
        path:this.state.filspath,
        message:this.state.message,
        secret_repository:true
      }
    }

    const props = {
      height:300,
      multiple: true,
      data:newdata,
      fileList:this.state.fileList,
      // showUploadList:false,
      action: `${getupload_git_file(shixunId)}`,
      onChange: this.handleChange,
      onRemove: this.onAttachmentRemove,
      beforeUpload: (file) => {
        let {message}=this.state;
        if(message===""||message===undefined){
          this.props.showNotification("上传文件请先填写提交信息")
          return  false
        }

        // this.props.showNotification("上传成功");
      },
    };

    return(
      <div>
        {this.state.visibles===true?<Repositoryfile
          titles={"选择文件上传目录"}
          evaluationvisible={this.state.visibles}
          hideNewFolder={this.hideNewFolder}
          {...this.state}
          {...this.props}
          selectupfils={true}
          selectupfilspath={(value)=>this.selectupfilspath(value)}
        />:""}
        <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;
            }
            .ant-upload ant-upload-drag{
              height: 300px;
            }
            // .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 className="formStyle">
            <div className="edu-back-white padding20-30 mb10">

              <p className="ant-form-item-label">
                <div className={"font-20 color-black"}>上传文件</div>
              </p>



              <div>
                <p className="ant-form-item-label">
                  <div className={"color888 font-16"}>当前目录：{this.state.filspath===""?"/":"/"+this.state.filspath}   <span className={"color-blue pointer"} onClick={this.Selectfiledirectory}>选择文件目录</span></div>
                </p>
              </div>


              {/*<div className="mt10 mb25 repoCMWrapper filecode">*/}

              {/*  <textarea className="" id="codemirror-file-edit" style={{display:'none'}} name="content"></textarea>*/}
              {/*</div>*/}



                <Dragger {...props}  >
                  <p className="ant-upload-drag-icon">
                    <i className="iconfont icon-shangchuan font-50 color-blue" />
                  </p>

                  <p className="ant-upload-hint mt30">
                    拖拽文件或  <span className="color-blue" >点击此处上传</span>
                  </p>
                </Dragger>

              {/*<Form.Item label="提交信息">*/}
              {/*  {getFieldDecorator('message', {*/}
              {/*    rules: [{required: true, message: "请输入提交信息"}],*/}
              {/*  })(*/}
              {/*    <textarea className="winput-100-130 fl"></textarea>*/}
              {/*  )}*/}
              {/*</Form.Item>*/}
              <Form.Item label="提交信息">

                {getFieldDecorator('message', {
                  rules: [{
                    required: true, message: '请输入提交信息',
                  },{
                    whitespace: true, message: '请勿输入空格'
                  }],
                })(
                  <Input placeholder="必填，描述主要修改内容（相当于Git Commit message的Header）" onInput={this.FormInput} className="winput-300-35 fl"/>
                )}
              </Form.Item>
            </div>
          </Form>
        </div>
        <Bottomsubmit {...this.props} {...this.state} url={`/shixuns/${shixunId}/${Repositoryflag}${this.state.filspath===""?"":"/master/shixun_show/"+this.state.filspath}`} bottomvalue={"确定"}/>
        {/*<Bottomsubmit {...this.props} {...this.state} url={`/shixuns/${shixunId}/${Repositoryflag}`} bottomvalue={"确定"}/>*/}

      </div>
    )
  }
}
const RepositoryAddFileupload_file = Form.create({name: 'RepositoryAddFileupload_files'})(RepositoryAddFileupload_files);
// RouteHOC()
export default (RepositoryAddFileupload_file);