import React, { Component } from "react";
import { getImageUrl } from "educoder";
import { Form, Input, Button, Radio, Icon, Spin } from "antd";
import { Link } from "react-router-dom";
import "./index.css";
import { turnbar , returnbar } from 'educoder';
import { Base64 } from 'js-base64';

import axios from "axios";
const TextArea = Input.TextArea;

class UserSubmitComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitType: "0",
      filename: "",
      isSpin: false,
    };
  }

  componentDidMount=()=>{
    const { descName } = this.props;
    if(descName){
      this.props.form.setFieldsValue({
        desc:descName
      })
    }
  }
  
  componentDidUpdate=(preProps)=>{
    const { descName } = this.props;
    if(preProps && descName && preProps.descName !== descName ){
      this.props.form.setFieldsValue({
        desc:descName
      })
    }
  }

  changeSubmittype = (e) => {
    this.setState({
      submitType: e.target.value,
    });
  };

  // 命名文件
  changeFileName = (e) => {
    this.setState({
      filename: e.target.value,
    });
  };

  // 提交变更
  subMitFrom = () => {
    const { filepath, content, editor_type , checkName} = this.props;
    const { branch, projectsId , owner } = this.props.match.params;
    const { submitType, filename } = this.state;
    this.setState({ isSpin: true });
    let path = editor_type === "upload" ? filepath : filepath.substr(1);
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err && !checkName) {
        const url = `/${owner}/${projectsId}/create_file.json`;
        axios.post(url, {
          filepath: filename ? filename : path,
          branch: returnbar(branch),
          new_branch: submitType === "1" ? values.branchname : undefined,
          content:editor_type === "upload" ? content : Base64.encode(content),
          message: values.desc,
        })
        .then((result) => {
          this.setState({ isSpin: false });
          if (result.data && result.data.name) {
            this.props.showNotification("文件新建成功!");
            if(submitType === "1"){
              const { getDetail } = this.props;
              getDetail && getDetail();
            }
            let url = `/${owner}/${projectsId}${values.branchname ? `/tree/${turnbar(values.branchname)}`: (branch ? `/tree/${turnbar(branch)}` : "")}`;
            this.props.history.push(url);
          }
        })
        .catch((error) => {
          this.setState({ isSpin : false });
          console.log(error);
        });
      } else {
        this.setState({ isSpin: false });
      }
    });
  };

  // 确认修改文件
  UpdateFile = () => {
    this.setState({ isSpin: true });
    const { branch, detail, content , currentBranch ,checkName } = this.props;
    const { projectsId , owner } = this.props.match.params;
    const { submitType } = this.state;
    const url = `/${owner}/${projectsId}/update_file.json`;
    let b = currentBranch || branch;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err && !checkName) {
        axios
          .put(url, {
            filepath: detail.path,
            branch: submitType === "1" ? undefined : returnbar(b),
            new_branch: submitType === "1" ? values.branchname : undefined,
            content: content,
            sha: detail.sha,
            message: values.desc,
          })
          .then((result) => {
            this.setState({ isSpin: false });
            if (result.data && result.data.status === 1) {
              let b = currentBranch || branch;
              let url = `/${owner}/${projectsId}${(values.branchname ? `/tree/${turnbar(values.branchname)}` : (b ? `/tree/${turnbar(b)}`:""))}`;
              this.props.history.push(url);
              this.props.showNotification("文件修改成功!");
            }
          })
          .catch((error) => {
            this.setState({ isSpin: false });
            console.log(error);
          });
      } else {
        this.setState({ isSpin: false });
      }
    });
  };

  checkBranchName=(rule, value, callback)=>{
    if(!value){
      callback();
    }
    if (value) {
      const str = '^*/';
      let reg = /\\/g;
      if(reg.test(value)){
        callback(<span>分支名不能包含下列任何字符：^*\/</span>);
      }else{
        for(var i=0;i<str.length;i++){
          let s = str[i];
          if(value.indexOf(s) > -1){
            callback(<span>分支名不能包含下列任何字符：^*\/</span>);
            return;
          }else{
            continue;
          }
        }
      }
    }
    callback();
  }

  render() {
    const { submitType, filename, isSpin } = this.state;
    const { getFieldDecorator } = this.props.form;

    const { branch, projectsId , owner } = this.props.match.params;

    const { current_user, filepath, projectDetail , currentBranch } = this.props;
    const { editor_type } = this.props;
    let b = currentBranch || branch;

    return (
      <div>
        <span className="df" style={{ alignItems: "center" }}>
          <Link to={`/${current_user && current_user.login}`} className="show-user-link" >
            <img
              src={getImageUrl(`/${current_user && current_user.image_url}`)}
              alt=""
              className="screwImg"
            />
            <span className="color-grey-3 ver-middle">
              {current_user && current_user.username}：
            </span>
          </Link>
          <span className="color-grey-8">提交变更</span>
        </span>
        <Spin spinning={isSpin}>
          <div className="userScrew">
            <div className="screwPanel">
              <Form>
                <Form.Item
                  style={{
                    display: editor_type === "upload" ? "block" : "none",
                  }}
                >
                  {getFieldDecorator("path", {
                    rules: [],
                  })(
                    <div className="setInputAddon">
                      <Input
                        addonBefore={`/${ projectDetail && projectDetail.identifier }/`}
                        value={filename || filepath}
                        onChange={this.changeFileName}
                        placeholder="文件路径..."
                      />
                    </div>
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator("desc", {
                    rules: [
                      {
                        required: true,
                        message: "请添加描述信息",
                      },
                    ],
                  })(
                    <TextArea
                      placeholder={`必填,描述主要修改类型和内容`}
                      authSize={{ minRows: 3, maxRows: 5 }}
                    />
                  )}
                </Form.Item>
                <Radio.Group
                  value={submitType}
                  onChange={this.changeSubmittype}
                >
                  <Radio value="0" className="mb10">
                    <i className="iconfont icon-banbenku font-16 mr5"></i>
                    直接提交至<span className="color-orange">{returnbar(b)}</span>分支
                  </Radio>
                  <Radio value="1">
                    <Icon type="pull-request" className="mr5" />
                    为此提交创建一个<span className="font-bd">新的分支</span>并发起合并请求
                  </Radio>
                </Radio.Group>
                {
                submitType === "1" ?
                  <div className="mt15">
                    <Form.Item style={{ paddingLeft: "24px" }}>
                      {getFieldDecorator("branchname", {
                        rules: [
                          {
                            required: true,
                            message: "请输入分支名称",
                          },
                          {
                            validator:this.checkBranchName
                          }
                        ],
                      })(
                        <Input
                          placeholder={`请输入分支名称`}
                          style={{ width: "220px" }}
                        />
                      )}
                    </Form.Item>
                  </div>:""
                }
              </Form>
            </div>
          </div>
          <div className="mt20">
            <Button
              type="primary"
              onClick={
                editor_type === "update" ? this.UpdateFile : this.subMitFrom
              }
              className="mr30"
            >
              提交变更
            </Button>
            <Button
              type="primary grey"
              onClick={() => {
                this.props.history.push(`/${owner}/${projectsId}`);
              }}
              className="mr20"
            >
              取消
            </Button>
          </div>
        </Spin>
      </div>
    );
  }
}
const WrappedUserSubmitForm = Form.create({ name: "UserSubmitForm" })(
  UserSubmitComponent
);
export default WrappedUserSubmitForm;
