import React, { Component } from 'react';
import { SnackbarHOC } from 'educoder';
import {Link} from 'react-router-dom';
import {Tooltip,Menu} from 'antd';
import Loadable from 'react-loadable';
import Loading from '../../../Loading';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import UpgradeModals from '../../modals/UpgradeModals';
import axios from 'axios';
import {getImageUrl} from 'educoder';
import { TPMIndexHOC } from '../../tpm/TPMIndexHOC';
import { CNotificationHOC } from '../../courses/common/CNotificationHOC'
import "./usersInfo.css"
import "../../courses/css/members.css"
import "../../courses/css/Courses.css"


import Trialapplication from '../../login/Trialapplication'


const InfosPackage = Loadable({
	loader: () => import('./InfosPackage'),
	loading:Loading,
})

const InfosCourse = Loadable({
  loader: () => import('./InfosCourse'),
  loading:Loading,
})
const InfosShixun = Loadable({
  loader: () => import('./InfosShixun'),
  loading:Loading,
})
const InfosPath = Loadable({
  loader: () => import('./InfosPath'),
  loading:Loading,
})
const InfosProject = Loadable({
  loader: () => import('./InfosProject'),
  loading:Loading,
})

const $ = window.$;
class Infos extends Component{
  constructor(props){
    super(props);
    this.state={
      data:undefined,
      is_current:true,
      is_edit:false,
      sign:undefined,
      type:0,
      login:undefined,
      isRenders:false,
      moduleName:"courses",
      next_gold:undefined
    }
  }
  componentDidMount =()=>{
		let upsystem=`/users/system_update.json`;
		axios.get(upsystem).then((response)=>{
			let updata=response.data;
			this.setState({
				updata:updata
			})
		}).catch((error)=>{
			console.log(error);
		})

		this.getInfo(this.props.match.params.username);
  }


  //判断是否看的是当前用户的个人主页
  componentDidUpdate =(prevProps)=> {
    if(this.props.current_user && prevProps.current_user != this.props.current_user){
      if(this.props.current_user.login != this.props.match.params.username){
        this.setState({
          is_current:false,
          login:this.props.current_user.login
        })
      }
    } else {
      if (prevProps.match.params.username != this.props.match.params.username) {
        this.getInfo(this.props.match.params.username);
      }
    }
  }


  //获取个人主页信息
  getInfo = (user_login) =>{
    let url =`/users/${user_login}/homepage_info.json`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          data:result.data,
          followed:result.data.followed,
          sign:result.data.brief_introduction,
          id:result.data.id,
          next_gold:result.data.tomorrow_attendance_gold
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  // 编辑签名
  editmysign=()=>{
    this.setState({
      is_edit:true
    },()=>{
      $("#mysign").focus();
    })
  }
  // 输入签名
  inputSign=(e)=>{
    this.setState({
      sign:e.target.value
    })
  }
  //取消编辑签名
  savemysign=()=>{
    let { sign } =this.state;
    let url=`/users/brief_introduction.json`;
    axios.post((url),{
      content:sign
    }).then((result)=>{
      if(result){
        this.setState({
          is_edit:false
        })
      }
    }).catch((error)=>{
      console.log(error)
    })
    
  }
  changeType=(e)=>{
    this.setState({
      type:e.key
    })
  }
  turnTo=(url)=>{
    this.props.history.push(url);
  }

  //签到
  signFor=()=>{
    let url=`/users/attendance.json`
    axios.post(url).then((result)=>{
      if(result){
        // this.setState(
        //   (prevState) => ({ 
        //     data : update(prevState.data, {attendance_signed: {$set: true} })
        //   })
        // )
        // this.setState({
        //   next_gold:result.data.next_gold
        // })
        this.getInfo(this.props.match.params.username);
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  // 关注
  followPerson=()=>{
    let{followed,id}=this.state;
    let url=`/users/${id}/watch.json`;
    // 取消关注
    if(followed){
      axios.delete(url).then((result)=>{
        if(result){
          this.setState({
            followed:false
          })
        }
      }).catch((error)=>{
        console.log(error)
      })
    }else{
      // 关注
      axios.post(url).then((result)=>{
        if(result){
          this.setState({
            followed:true
          })
        }
      }).catch((error)=>{
        console.log(error);
      })
    }
  }

  // 试用申请
  trialapplications =()=>{
    this.setState({
      isRenders: true,
      showTrial:true
    })
  }
  cancelModulationModels=()=>{
    this.setState({
      isRenders: false
    })
  }
  ToBank=(url)=>{
    window.location.href=url;
  }

  render(){
    let { 
      data ,
      is_current,
      is_edit,
      sign,
      type,
      followed,
      id,
      login,
      isRenders,
      moduleName,
      next_gold
     }=this.state;
     let {username}= this.props.match.params;

     let {pathname}=this.props.location;
     moduleName=pathname.split("/")[3];
    return(
      <div className="newMain">
				{this.state.updata===undefined?"":<UpgradeModals
					{...this.state}
				/>}
        {
          isRenders && <Trialapplication {...this.props} {...this.state} Cancel={() => this.cancelModulationModels()}/>
        }
        <div className="user-main-half">
          <div className="user-headImg"></div>
          <div className="user-headCon">
            <div className="pr" style={{"min-height": "465px"}}>
              <div className="educontent pt80 clearfix edu-txt-center">
                <div className="inline">
                  <div className="fl headtab">
                    <span>{is_current ? "我":"TA"}的经验值</span>
                    <a style={{ cursor: 'default' }}
											// href={`${this.props.Headertop && this.props.Headertop.old_url}/users/${username}/user_experience`}
										>{data && data.experience}</a>
                  </div>
                  <em className="v-h-line fl"></em>
                  <div className="fl headtab">
                    <span>{is_current ? "我":"TA"}的金币</span>
                    <a style={{ cursor: 'default' }}
											// href={`${this.props.Headertop && this.props.Headertop.old_url}/users/${username}/user_grade`}
											id="user_code">{data && data.grade}</a>
                  </div>
                  <div className="headphoto mt14">
                    <img alt="头像" id="user_avatar_show" nhname="avatar_image" src={data && `${getImageUrl('images/'+data.avatar_url)}`}/>
                  </div>
                  <div className="fl headtab">
                    <span>{is_current ? "我":"TA"}的粉丝</span>
                    <a style={{ cursor: 'default' }}
											// href={`${this.props.Headertop && this.props.Headertop.old_url}/users/${username}/user_fanslist`}
											id="user_h_fan_count">{data && data.fan_count}</a>
                  </div>
                  <em className="v-h-line fl"></em>
                  <div className="fl headtab">
                    <span>{is_current ? "我":"TA"}的关注</span>
                    <a style={{ cursor: 'default' }}
											// href={`${this.props.Headertop && this.props.Headertop.old_url}/users/${username}/user_watchlist`}
										>{data && data.follow_count}</a>
                  </div>
                  <span className="clearfix"></span>
                  <span className="myName">{data && data.name}</span>
                </div>
              </div>
              <div className="educontent mt10 clearfix edu-txt-center">
                <div className="inline">
                  {
                    data && is_current == false && data.identity =="学生" ? "" : <span className="mypost fl mr10">{data && data.identity}</span>
                  }
                  <a
										 // href={is_current ? `${this.props.Headertop && this.props.Headertop.old_url}/account/authentication` :"javascript:void(0)"}
										 // target="_blank"
										 className={is_current ? "ringauto fl" :"ringauto fl cdefault"}>
                    <Tooltip placement='bottom' title={ data && data.authentication ?"已实名认证":"未实名认证"}>
                      <i className={ data && data.authentication ? "iconfont icon-shenfenrenzheng font-13 color-blue":"iconfont icon-shenfenrenzheng font-13 color-grey-9"}></i>
                    </Tooltip>
                  </a>
                  <a
										// href={is_current ? `${this.props.Headertop && this.props.Headertop.old_url}/account/professional_certification` :"javascript:void(0)"}
										// target="_blank"
										className={is_current ? "ringauto fl" :"ringauto fl cdefault"}>
                    <Tooltip placement='bottom' title={ data && data.professional_certification ?"已职业认证":"未职业认证"}>
                      <i className={ data && data.professional_certification ? "iconfont icon-zhiyerenzheng font-13 color-blue":"iconfont icon-zhiyerenzheng font-13 color-grey-9"}></i>
                    </Tooltip>
                  </a>
                  <a
										// href={is_current ? `${this.props.Headertop && this.props.Headertop.old_url}/account/change_or_bind?type=phone` :"javascript:void(0)"}
										// target="_blank"
										className={is_current ? "ringauto fl" :"ringauto fl cdefault"}>
                    <Tooltip placement='bottom' title={ data && data.phone_binded ?"已手机认证":"未手机认证"}>
                      <i className={ data && data.phone_binded ? "iconfont icon-shoujirenzheng font-13 color-blue":"iconfont icon-shoujirenzheng font-13 color-grey-9"}></i>
                    </Tooltip>
                  </a>
                  <a
										// href={is_current ? `${this.props.Headertop && this.props.Headertop.old_url}/my/account` :"javascript:void(0)"}
										// target="_blank"
										className={is_current ? "ringauto fl" :"ringauto fl cdefault"}>
                    <Tooltip placement='bottom' title={ data && data.email_binded ?"已邮箱认证":"未邮箱认证"}>
                      <i className={ data && data.email_binded ? "iconfont icon-youxiangrenzheng font-13 color-blue":"iconfont icon-youxiangrenzheng font-13 color-grey-9"}></i>
                    </Tooltip>
                  </a>
                  {/* <!--学院管理员身份--> */}
                  {
                    data && data.college_identifier &&
                    <a
											// href={`${this.props.Headertop && this.props.Headertop.old_url}/colleges/${data.college_identifier}/statistics`} target="_blank"
											className={is_current ? "ringauto fl" :"ringauto fl cdefault"}>
                      <Tooltip placement='bottom' title="学院管理员">
                        <i className="iconfont icon-chengyuanguanli font-12 color-blue" data-tip-down="学院管理员"></i>
                      </Tooltip>
                    </a>
                  }
                </div>
              </div>
              <div className="mt15 educontent clearfix edu-txt-center">
                <p className="mb20" style={{"height": "28px"}}>
                  {
                    is_edit && is_current ? 
                    <input type="text" id="mysign" class="mysign-input" placeholder="请输入您的个性签名" style={{height:"20px"}} value={sign} onInput={this.inputSign} onBlur={this.savemysign}/>
                    :
                    is_current ? 
                    <a className="mysign-span" onClick={this.editmysign} style={{"display": "block"}}>{sign || "这家伙很懒，什么都没留下~"}</a>
                    :
                    <span className="mysign-span" style={{"display": "block","cursor":"default"}}>{sign || "这家伙很懒，什么都没留下~"}</span>
                  }
                </p>
                {
                  is_current ? 
                  <div className="inline">
                    {
                      data && data.attendance_signed ? 
                      <React.Fragment>
                        <span className="user_default_btn user_grey_btn mb5">已签到</span>
                        <p id="attendance_notice" className="none font-12 color-grey-6" style={{"display":"block"}}>明日签到&nbsp;<font className="color-orange">+{next_gold}</font>&nbsp;金币</p>
                      </React.Fragment>
                      :
                      <a herf="javascript:void(0);" onClick={this.signFor} id="attendance" className="user_default_btn user_orange_btn fl mb15">签到</a>
                      // <a herf="javascript:void(0);" onClick={this.trialapplications} id="authentication_apply" className="user_default_btn user_private_btn fl ml15">试用申请</a>
                    }
                  </div> 
                  :
                  <div className="inline">
                    <a href="javascript:void(0);" onClick={this.followPerson} className="user_default_btn user_watch_btn user_private_btn fl mr20">{followed ? "取消关注":"关注"}</a>
                    <a href={`${this.props.Headertop && this.props.Headertop.old_url}/messages/${login}/message_detail?target_ids=${id}`} className="user_default_btn user_private_btn fl">私信</a>
                  </div>
                }
              </div>
              <div className="edu-txt-center navInfo">
                <div className="inline">
                  <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>

                  {/*{ data && data.identity!="学生" && <li> <a href={`${this.props.Headertop && this.props.Headertop.old_url}/users/${username}?type=m_bank`}>题库</a></li>}*/}
                  
                </div>
              </div>
            </div>
          </div>
        </div>
        <Switch {...this.props}>
            
            {/* --------------------------------------------------------------------- */}


						{/* 众包 */}
						{/* http://localhost:3007/courses/1309/homework/9300/setting */}
						<Route exact path="/users/:username/package"
									 render={
										 (props) => (<InfosPackage {...this.props} {...props} {...this.state} />)
									 }
						></Route>

            {/* 课堂 */}
            {/* http://localhost:3007/courses/1309/homework/9300/setting */}
            <Route exact path="/users/:username/courses" 
              render={
                (props) => (<InfosCourse {...this.props} {...props} {...this.state} />)
              }
            ></Route>

            {/* 实训 */}
            <Route exact path="/users/:username/shixuns"
              render={
                (props) => (<InfosShixun {...this.props} {...props} {...this.state} />)
              }
            ></Route>

            {/* 实训课程 */}
            <Route exact path="/users/:username/paths"
              render={
                (props) => (<InfosPath {...this.props} {...props} {...this.state} />)
              }
            ></Route>

            {/* 项目 */}
            <Route exact path="/users/:username/projects"
              render={
                (props) => (<InfosProject {...this.props} {...props} {...this.state} />)
              }
            ></Route>


            <Route exact path="/users/:username" 
              render={
                (props) => (<InfosCourse {...this.props} {...props} {...this.state} />)
              }
            ></Route>
            
          </Switch>
      </div>
    )
  }
}
export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(Infos) ));