import React , { Component } from 'react';
import { Link , Route , Switch } from 'react-router-dom';

import '../css/index.css'
import './list.css';

import Loadable from 'react-loadable';
import Loading from '../../Loading';

import axios from 'axios';
const FileNew = Loadable({
	loader: () => import('../Newfile/Index'),
	loading: Loading,
})
const OrderIndex = Loadable({
	loader: () => import('../Order/order'),
	loading: Loading,
})
const CoderRootIndex = Loadable({
	loader: () => import('./CoderRootIndex'),
	loading: Loading,
})
class Detail extends Component{
  constructor(props){
    super(props);
    this.state={
      projectDetail:undefined
    }
  }

  componentDidMount=()=>{
    this.getDetail();
  }

  getDetail=()=>{
    const { login } = this.props.current_user;
    const { projectsId } = this.props.match.params;
    const url = `/${login}/${projectsId}.json`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          projectDetail:result.data
        })
      }
    }).catch((error)=>{})
  }

  render(){
    const { projectsId } = this.props.match.params;
    
    const { projectDetail } = this.state;
    const url = this.props.history.location.pathname;
    return(
      <div>
        <div className="detailHeader-wrapper">
          <div className="normal f-wrap-between mb20">
            <p className="font-18 color-blue df flex-1" style={{alignItems:"center"}}>{projectDetail && projectDetail.author && projectDetail.author.name} / <span className="hide-1 flex-1">{ projectDetail && projectDetail.identifier }</span></p>

            <span className="p-r-tags large">
              <span><label>关注</label><span>{projectDetail && projectDetail.watchers_count}</span></span>
              <span><label>点赞</label><span>{projectDetail && projectDetail.praises_count}</span></span>
              <span><label>Fork</label><span>{projectDetail && projectDetail.forked_count}</span></span>
            </span>
          </div>
          <div className="normal f-wrap-between">
            <ul className="headerMenu-wrapper">
              <li className={url.indexOf("coder")>0? "active" : ""}><Link to={`/projects/${projectsId}/coder`}>代码</Link></li>
              <li className={url.indexOf("orders")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/orders`}>工单</Link></li>
              <li className={url.indexOf("merge")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/merge`}>合并请求</Link></li>
              <li className={url.indexOf("edition")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/edition`}>版本发布</Link></li>
              <li className={url.indexOf("trends")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/trends`}>动态</Link></li>
            </ul>
          </div>
        </div>

        <Switch {...this.props}>
          <Route path="/projects/:projectsId/coder/:branch/newfile/:path"
            render={
              (props) => (<FileNew {...this.props} {...props} {...this.state}/>)
            }
          ></Route>
          <Route path="/projects/:projectsId/coder/:branch/newfile"
            render={
              (props) => (<FileNew {...this.props} {...props} {...this.state}/>)
            }
          ></Route>
          <Route path="/projects/:projectsId/orders"
            render={
              (props) => (<OrderIndex {...this.props} {...props} {...this.state}/>)
            }
          ></Route>
          <Route path="/projects/:projectsId/coder"
            render={
              (props) => (<CoderRootIndex {...this.props} {...props} {...this.state}/>)
            }
          ></Route>
        </Switch>
      </div>
    )
  }
}

export default Detail;