import React, { Component } from 'react';
import {getImageUrl} from "educoder";
import RepositoryDirectories from './RepositoryDirectories';
import { Button ,Tree,Icon} from "antd";
import {Link} from 'react-router-dom';
import RepositoryCombinePath from './RepositoryCombinePath';
import RepositoryNoneData from './RepositoryNoneData';
import Repositoryfile from './Repositoryfile';
import './Repository.css';
const $ = window.$;
const { TreeNode, DirectoryTree } = Tree;
// 点击按钮复制功能
function jsCopy(){
  var e = document.getElementById("copy_rep_content");
  e.select();
  document.execCommand("Copy");
}
/**
 提交记录
 使用指南
 */
class Repository extends Component {
  constructor(props) {
    super(props);
    this.state={
      evaluationvisible:false,
		}
  }

  componentDidMount() {

  }

  onRepoFileClick = (item) => {
    this.props.fetchRepo(item)
  }

  NewFolder=()=>{
    this.setState({
      evaluationvisible:true
    })
  }

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

  onSelectDirectoryTree=(selectedKeys, info)=>{
    this.onRepoFileClick(info.node.props.item)
  }
  render() {
    let { match, author, git_url, lastest_commit,repositoryLoading, commits,trees,pathArray , TPMRightSectionData } = this.props;
    let matchpath =this.props.match.path;
    let Repositoryflag ="";
    if(matchpath==="/shixuns/:shixunId/repository"){
      Repositoryflag ="repository";
    }else if(matchpath==="/shixuns/:shixunId/secret_repository"){
      Repositoryflag ="secret_repository";
    }
    if (!author) {
      author = {}
    }
    let userauthority=false;
    if(this.props.author!=undefined){
      userauthority=this.props.author.login===""||this.props.author.user_id===""||this.props.author.login===null||this.props.author.user_id===null;
    }

    return (
      <React.Fragment>
        {this.state.evaluationvisible===true?<Repositoryfile
          {...this.state}
          {...this.props}
          hideNewFolder={()=>this.hideNewFolder()}
          setfilepath={(path)=>this.setfilepath(path)}
        />:""}
        { repositoryLoading ? <div style={{ minHeight: '500px'}}></div> :
          <div  className="mb10" id="collaborators_list_info">
            <div className="clearfix edu-back-white">
              <div className="padding16-20 clearfix borbotF4">
                <div className="fl1 clearfix1 mr201">
                  <div className="repositorytitle">
                    <div className="fl font-12 color-grey-9 pr">
                      <label className="fl Websiteclone">网址克隆：</label>
                      <div className={"fl copy_rep_contentbox"}>
                      <input type="text" id="copy_rep_content" className="fl url-input mt2"
                             defaultValue={ git_url } style={{width: 266}}/>
                      <a onClick={() => {
                        jsCopy()
                      }} data-tip-down="点击复制版本库地址"
                         className="fl ml5">
                        <i className="iconfont icon-fuzhi2 colorbe" style={{lineHeight: '18px'}}></i>
                      </a>
                      </div>
                      <style>
                        {`
                      .top-black-trangle {
                        right: 68px;

                      }
                      a.guideBtn {
                        color: #4CACFF !important;
                        margin-left: 4px;
                      }
                      a.guideBtn:hover {
                        text-decoration: underline;
                      }

                      #repository_url_tip {
											top: 30px !important;
										  left:161px !important;
											width: 292px !important;
                      }
                      `}
                      </style>
                      {/* <a href="https://www.educoder.net/forums/2784" target="_blank"
                      className="fr edu-default-btn edu-greenback-btn">Git使用指南</a> */}


                      <a
                        onClick={() => { $('#repository_url_tip').css('display') === 'none'
                          ? $('#repository_url_tip').show()
                          : $('#repository_url_tip').hide() }}
                        className="fl ml6 mt4">
                        {/*<img src={getImageUrl("images/educoder/problem.png")}/>*/}
                        <i className="iconfont icon-tishi2 colorbe"></i>
												<div className="invite-tip clearfix none" id="repository_url_tip"
														 style={{  width: '300px', display: 'none'}}>
													<span className="top-black-trangle" style={{"right":"0px"}}></span>
													<div className="padding16 invitecontent clearfix">
														<p className="font-12 edu-txt-left">请上传当前实训中各个关卡涉及的所有文件<br/>
															包括任务文件、执行文件，以及其他的必须文件<br/><br/>
															提交代码的方法：<br/>
															1、在电脑上安装Git tortoise客户端，或者其它熟悉的Git客户端,在Git客户端上向左侧的地址提交代码<br/>
                              2.直接在平台上新建文件/文件夹，或者拖拽上传相关代码文件<br/><br/>
															注意:<br/>
															请在Git客户端要求填写时，按照如下说明填写：<br/>
															* 用户名：使用您在本平台绑定的邮箱<br/>
															* 口令：使用您在本平台的登录口令
														</p>
													</div>
													<p className="inviteTipbtn with100"><a
														onClick={() => { $('#repository_url_tip').css('display') === 'none'}}>知道了</a></p>
												</div>
                      </a>

                    </div>

                    {
                      this.props.current_user && (this.props.current_user.admin ==true || (TPMRightSectionData && TPMRightSectionData.creator && TPMRightSectionData.creator.login == this.props.current_user.login)) ?
                        // !this.props.secret_repository_tab &&
                        (
                          <div>
                            <Button type="primary"
                                    onClick={this.NewFolder}
                                    className="edu-default-btn edu-greenback-btn  mt5 fr"
                            >新建文件夹</Button>

                            <Link to={`/shixuns/${match.params.shixunId}/${Repositoryflag}/add_file`}>
                              <Button type="primary"
                                      className="edu-default-btn edu-greenback-btn  mt5 mr10 fr"
                              >新建文件</Button>
                            </Link>

                            <Link to={`/shixuns/${match.params.shixunId}/${Repositoryflag}/upload_file`}>
                            <Button type="primary"
                                    className="edu-default-btn edu-greenback-btn  mt5 mr10 fr"
                            >上传文件</Button>
                            </Link>
                          </div>
                        )

                        :""
                    }

                  </div>



                </div>
              </div>

              <style>
                {`
              .va_sub {
                vertical-align: sub;
              }
            `}
              </style>

              {/*私密版本库*/}
              {this.props.secret_repository_tab && (
                <div className={"combinePathEditRow padding040pxRepository"}>
                  <div className={"colorFF6601"}>私密版本库的文件对学员始终隐藏，无法访问查看。 </div>
                  <div className={"colorFF6601"}>若评测学员任务需要使用私密版本库的文件，请指定将私密版本库合并到常规版本库的目标路径，以确保评测时能访问私密版本库的文件。</div>
                </div>
              )}
            {  trees === undefined || trees === null ||trees.length===0? "":this.props.secret_repository_tab && <div className={"padding020Repository mt20"}>
                  <RepositoryCombinePath {...this.props}></RepositoryCombinePath>
              </div> }


              {/* 用户、最近提交时间 */}
              {
                trees === undefined || trees === null ||trees.length===0? <RepositoryNoneData></RepositoryNoneData>:
                  <div className={"padding020Repository"}>
										{commits===undefined?"":commits===null||commits.length===0?"":<div className=" padding10-20 clearfix height7052pxRepositor borbotF4">
                      <img alt={author.name} className="radius fl mr10 mt5"
                           height="35"
                           src={getImageUrl(`images/`+commits[0].author.image_url)}
                           style={{display:userauthority===true?"none":"block"}}
                           width="35"/>
                      <a href={author.user_url} className="mr5 va_sub color-grey-8" target="_blank">{commits[0].author.name}</a>
                      <span className="color-grey-8 va_sub">提交于
                                <acronym title={commits[0].time}>
                                  {commits===undefined?"":commits[0].time}
                                </acronym> ：{commits===undefined?"":commits[0].title}
                              </span>
                      <a href={`/shixuns/${match.params.shixunId}/${this.props.secret_repository_tab ? 'secret_repository' : 'repository'}/${match.params.shixunId}/commits`}
                         className="color-grey-8 fr font-16 mt3">
                        <i className="iconfont icon-tijiaojilu font-18 fl mr5"></i>
                        <span className="fl color-grey-8 ">提交记录</span>
                      </a>
                    </div>}

                    <div className="padding20" style={{minHeight: '372px'}}>
                      <div>
                        {/* 当前目录位置 */}
                        <RepositoryDirectories {...this.props}></RepositoryDirectories>

                        {/*<div className="versionFileList">*/}
                        {/*  { trees === undefined ?"": trees === null || trees.length===0?"":trees.map((item, index) => {*/}
                        {/*    return (*/}
                        {/*      <li id={`file${index}`} key={index} className=" file padding5-10">*/}
                        {/*                        <span style={{marginLeft: '0px'}} className="task-hide">*/}
                        {/*                          <i className={`${item.type === 'tree' ? 'icon-wenjianjia' : 'icon-zuoye'}*/}
                        {/*                            iconfont color-blue`}></i>*/}
                        {/*                          <a*/}
                        {/*                            onClick={() => this.onRepoFileClick(item)}>*/}
                        {/*                            &nbsp;{item.name}*/}
                        {/*                          </a>*/}
                        {/*                        </span>*/}
                        {/*      </li>*/}
                        {/*    )*/}
                        {/*  })}*/}
                        {/*</div>*/}

                        <DirectoryTree multiple defaultExpandAll onSelect={this.onSelectDirectoryTree}>
                          { trees === undefined ?"": trees === null || trees.length===0?"":trees.map((item, index) => {
                            return (
                                <TreeNode   item={item} title={`${item.name}`} key={item.type==='tree'?"0-0":`0-0-${index}`} icon={item.type==='tree'?<i className="iconfont icon-xingzhuangjiehebeifen color-blue font-12" />:<i className="iconfont icon-xingzhuangjiehe color-blue font-12"/>} id={`file${index}`}  key={index}>
                                </TreeNode>
                            )})}
                        </DirectoryTree>
                      </div>
                    </div>

                  </div>
              }
            </div>
          </div>
        }
        {    trees === undefined || trees === null ||trees.length===0?"":<a href="/forums/2784" target="_blank"
           className=" guideBtn" >Git使用指南</a>}
        {/* 当前分支的文件 */}
      </React.Fragment>

    );
  }
}


export default Repository;
