import React, { Component } from 'react';

import {Link} from 'react-router-dom';
import {Tooltip,Menu} from 'antd';
import {getImageUrl} from 'educoder';

import "./usersInfo.css"
import "../../courses/css/members.css"
import "../../courses/css/Courses.css"

import banner from '../../../images/account/infobanner.png'

class InfosBanner extends Component{
  constructor(props){
    super(props);
  }
  render(){
    let { 
      data ,
      id,
      login,
      moduleName,
      current_user,
     }=this.props;
     let  is_current=this.props.is_current;
     let {username}= this.props.match.params;
     let {pathname}=this.props.location;
     moduleName=pathname.split("/")[3];
    return(
      <div className="bannerPanel mb60">
        <div className="educontent">
          <div className="clearfix color-white mb25">
            <p className="myPhoto mr20 fl"><img alt="头像" src={data && `${getImageUrl('images/'+data.avatar_url)}`}/></p>
            <div className="fl">
              <p className="clearfix mt20">
                <span className="username task-hide" style={{"maxWidth":'370px'}}>{data && data.name}</span>
                {
                  data && is_current == false && data.identity =="学生" ? "" : 
                  <span className="userpost"><label>{data && data.identity}</label></span>
                }
              </p>
              <p className="mt15">
                <Tooltip placement='bottom' title={ data && data.professional_certification ?"已职业认证":"未职业认证"}>
                  <i className={ data && data.professional_certification ? "iconfont icon-shenfenzhenghaomaguizheng font-18 user-colorgrey-green mr20 ml2":"iconfont icon-shenfenzhenghaomaguizheng font-18 user-colorgrey-B8 mr20 ml2"}></i>
                </Tooltip>
                <Tooltip placement='bottom' title={ data && data.authentication ?"已实名认证":"未实名认证"}>
                  <i className={ data && data.authentication ? "iconfont icon-renzhengshangjia font-18 user-colorgrey-green":"iconfont icon-renzhengshangjia font-18 user-colorgrey-B8"}></i>
                </Tooltip>
              </p>
            </div>
            <div className="fr">
              <div class="fl headtab mt20">
                <span>{is_current ? "我":"TA"}的经验值</span>
                <a style={{"cursor":"default"}}>{data && data.experience}</a>
              </div> 
              <div class="fl headtab mt20 pr leftTransform pl20">
                <span>{is_current ? "我":"TA"}的金币</span>
                <a style={{"cursor":"default"}}>{data && data.grade}</a>
              </div> 
              {
                is_current ? 
                <span className="fl mt35 ml60">
                  {
                    data && data.attendance_signed ? 
                    <span className="user_default_btn user_grey_btn font-18">已签到</span>
                    :
                    <a herf="javascript:void(0);" onClick={this.props.signFor} className="user_default_btn user_yellow_btn fl font-18">签到</a>
                  }
                </span> 
                :
                <span className="fl mt35 ml60">
                  <a href={`/messages/${login}/message_detail?target_ids=${id}`} className="user_default_btn user_yellow_btn fl font-18">私信</a>
                </span>
              }
            </div>
          </div>
          <div className="userNav">
            <li className={`${moduleName == 'courses' ||moduleName == undefined ? 'active' : '' }`}>
              <Link
                onClick={() => this.setState({moduleName: 'courses'})}
                to={`/users/${username}/courses`}>翻转课堂</Link>
            </li>
            <li className={`${moduleName == 'shixuns' ? 'active' : '' }`}>
              <Link
                onClick={() => this.setState({moduleName: 'shixuns'})}
                to={`/users/${username}/shixuns`}>开发社区</Link>
            </li>
            <li className={`${moduleName == 'paths' ? 'active' : '' }`}>
              <Link 
                onClick={() => this.setState({moduleName: 'paths'})}
                to={`/users/${username}/paths`}>实践课程</Link>
            </li>
            <li className={`${moduleName == 'projects' ? 'active' : '' }`}>
              <Link
                onClick={() => this.setState({moduleName: 'projects'})}
                to={`/users/${username}/projects`}>项目</Link>
            </li>
            <li className={`${moduleName == 'package' ? 'active' : '' }`}>
              <Link
                onClick={() => this.setState({moduleName: 'package'})}
                to={`/users/${username}/package`}>众包</Link>
            </li>
            {((is_current && current_user && current_user.is_teacher ) || current_user && current_user.admin) 
            && <li className={`${moduleName == 'videos' ? 'active' : '' }`}>
              <Link
                onClick={() => this.setState({moduleName: 'videos'})}
                to={`/users/${username}/videos`}>视频</Link>
            </li>}
          </div>
        </div>
      </div>
    )
  }
}
export default InfosBanner;