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

  componentDidMount(){

  }

  handleSubmit = () =>{
    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()
        // }).then((result)=>{
        //   if(result){
        //     this.props.history.push(`${result.data.url}`)
        //   }
        // }).catch((error)=>{
        //   console.log(error);
        // })
      }
    })
  }
  handleChange = (info) => {
    console.log(info)
    console.log(info.file)

    //
    // notification.open({
    //   message: '提示',
    //   description:  result.data.messages,
    // });
    let fileList = [...info.fileList];
    fileList = fileList.slice(-2);
    fileList = fileList.map(file => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });

    this.setState({ fileList });


  };

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

    let matchpath =this.props.match.path;

    let Repositoryflag =false;

    if( matchpath.indexOf("repository")>-1){
      Repositoryflag =false;
    }
    if(matchpath.indexOf("secret_repository")>-1){
      Repositoryflag =true;
    }
    const url = `/shixuns//${shixunId}/delete_git_file.json`;
    axios.delete(url, { data: {
        path:filspath+info.name,
        message:message,
        secret_repository:Repositoryflag
      }})
      .then((response) => {
        if (response.data.status == 0) {

        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  FormInput=(e)=>{
    this.setState({
      message:e.target.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 Repositoryflagtype =false;
    let Repositoryflag ="";

    if( matchpath.indexOf("repository")>-1){
      Repositoryflag ="repository";
      Repositoryflagtype =false;
    }
    if(matchpath.indexOf("secret_repository")>-1){
      Repositoryflag ="secret_repository";
      Repositoryflagtype =true;
    }
    const props = {
      height:300,
      multiple: true,
      data:{
        path:this.state.filspath,
        message:this.state.message,
        secret_repository:Repositoryflagtype
      },
      // 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){
          notification.open({
            message: '提示',
            description:  '上传文件请先填写提交信息',
          });
          return  false
        }
      },
    };

    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;
            }
            .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 onSubmit={this.handleSubmit} className="formStyle">
            <div className="edu-back-white padding20-30 mb10">

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

              <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>


              <p className="ant-form-item-label">
                <div className={"color888 font-16"}>{this.state.filspath}   <span className={"color-blue"}>选择文件目录</span></div>
              </p>

              {/*<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>*/}

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