import React, { Component } from 'react';

import { Redirect } from 'react-router';

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import axios from 'axios';

import { TPMIndexHOC } from '../tpm/TPMIndexHOC';

import SiderBar from '../tpm/SiderBar';

import UpgradeModals from '../modals/UpgradeModals';

import { SnackbarHOC , getImageUrl} from 'educoder';

import Slider from '@icedesign/base/lib/slider';

import '@icedesign/base/lib/slider/style.js';

import Rating from '@icedesign/base/lib/rating';

import '@icedesign/base/lib/rating/style.js';

import './home.css';

import {Tooltip,Spin} from 'antd';

const $ = window.$;

class ShixunsHome extends Component {
    constructor(props) {
        super(props)
        this.state={
            homedatalist:undefined,
            hometypepvisible:true
        }
    }
    componentDidMount(){
			const upsystem=`/users/system_update.json`;
			axios.get(upsystem).then((response)=>{
				let updata=response.data;
				this.setState({
					updata:updata
				})
			}).catch((error)=>{
				console.log(error);
			})
        let url=`/home/index.json`;
        axios.get(url).then((response)=> {
            if(response.status===200){
               this.setState({
                   homedatalist:response.data,
                   hometypepvisible:false
               })
            }
        }).catch((error)=>{
            console.log(error)
        });
    }

    bannaronmousemove=()=>{
       $("#bannerrightimg").show();
       $("#bannerleftimg").show();
    }

    bannaronmouseout=()=>{
       $("#bannerrightimg").hide();
       $("#bannerleftimg").hide();
    }
    render() {

        let {homedatalist,hometypepvisible} = this.state;

        const arrowStylel = {
            left: "-76px",
            width: "76px",
            textAlign: "left",
            height: "100%",
            cursor: "pointer"
        };

        const arrowStyler = {
            right: "-120px",
            width: "76px",
            textAlign: "left",
            height: "100%",
            cursor: "pointer"
        };
        const noneStyler={
            display: "none"
        }
        const CustomNextArrow = props => {
            return (
                <div {...props}  id="bannerright" style={arrowStyler}>
                    <img id="bannerrightimg" style={noneStyler} src={"/images/educoder/banner-right.png"} />
                </div>
            );
        };

        const CustomPrevArrow = props => {
            return (
                <div {...props}  id="bannerleft" style={arrowStylel}>
                    <img id="bannerleftimg" style={noneStyler} src={"/images/educoder/banner-left.png"} />
                </div>
            );
        };

         let homedatalistreps;

         if(homedatalist!=undefined){
             homedatalistreps=[];
            for(var i=0; i<homedatalist.reps.length;i++){
                homedatalistreps.push(homedatalist.reps[homedatalist.reps.length-i-1])
            }
         }

        return (
            <div className="newMain clearfix   backFAFAFA">
							{this.state.updata===undefined?"":<UpgradeModals
								{...this.state}
							/>}
									<Spin spinning={hometypepvisible}  size="large" style={{marginTop:'15%'}}>
                    {/*懒加载*/}

                        <SiderBar/>
                        <div className="clearfix">
                             <div className="clearfix edu-back-white pb40 pt30 mb20" id="index-top" onMouseMove={this.bannaronmousemove} onMouseOut={this.bannaronmouseout}>
                                <div className="educontent pr educontentSlider">
                                    {homedatalist===undefined?"":
                                    <Slider
                                        nextArrow={<CustomNextArrow />}
                                        prevArrow={<CustomPrevArrow />}
                                        autoplay
                                        animation={false}
                                        style={{width:"100%"}}
                                        arrowPos="outer">
                                            {homedatalist.images_url.map((item, index) => (
                                                <div key={index} className="slider-img-wrapper">
                                                    <a href={item.path}>
                                                        <img src={item.image_url} />
                                                    </a>
                                                </div>
                                            ))}
                                     </Slider>
                                    }
                                    <div className="user_navlist">
                                        <div className="user_navlist_black">
                                            <ul className="black_nav_list">
                                                {homedatalist === undefined ? "" :homedatalistreps.map((item,key)=>{

                                                        return(
                                                            <li className="welcome_shixun_index" data-id="1" data-type="rep" key={key}>
                                                                <span className="black_nav_span clearfix font-12">
                                                                    <Link  to={"/shixuns?id="+item.rep_id+"&type=rep"}>
                                                                          {item.rep_name}
                                                                    </Link>
                                                                    <img
                                                                    src={getImageUrl("images/educoder/icon/downarrowsmall-right.svg")}
                                                                    className="fr mt15 transform-90"/>
                                                                </span>
                                                                <ul className="user_navlist_white" >
                                                                {
                                                                    item.sub_rep_list.map((i,k)=>{
                                                                       return(
                                                                               <div className="clearfix mt20 mb5 pb10 navlistpanel-line" key={k}>
                                                                                   <p className="little-title clearfix welcome_shixun_index little-titles"
                                                                                      data-id="1" data-rep-id="1" data-type="sub"
                                                                                   >
                                                                                       <Link  to={"/shixuns?id="+i.sub_rep_id+"&type=sub&palce="+item.rep_id}>
                                                                                           {i.sub_rep_name}
                                                                                       </Link>
                                                                                   </p>
                                                                                   {
                                                                                       i.tag_rep_list.map((t,e)=>{
                                                                                           return(
                                                                                               <Link className="welcome_shixun_index"
                                                                                                  data-id="1" data-rep-id="1" data-sub-id="1"
                                                                                                  to={"/shixuns?id="+t.tag_id+"&type=tag&palce="+item.rep_id}
                                                                                                  data-type="tag" key={e}>{t.tag_name}</Link>
                                                                                               )
                                                                                       })
                                                                                   }

                                                                               </div>

                                                                           )
                                                                    })
                                                                }
                                                                </ul>
                                                            </li>
                                                        )
                                                    })

                                                }
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                             </div>

                            {/*实训路径*/}
                            <div className="clearfix pt20 educontent pr pb20">
                                <div className="edu-txt-center">
                                    <p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>实践课程</p>
                                    <p className="color-grey-cd font-12">TRAINING COURSE</p>
                                </div>
                                <Link to={"/paths"} className="moreitem">更多<i className="fa fa-angle-right ml5"></i></Link>

                                <div className="square-list clearfix" style={{width:'102%'}}>


                                    {homedatalist===undefined?"":homedatalist.subjects.map((item,key)=>{
                                        if(key<8)
                                        return(
                                            <div className="square-Item" key={key} id={item.id} style={{width:'286px'}}>

                                                <div className="tag-green">
                                                    <span className="tag-name"> {item.name}</span>
                                                    <img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>
                                                </div>

                                                <div className={item.power === false ? "closeSquare" : "none"}>
                                                    <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
                                                         className="mt80 mb25"/>
                                                    <p className="font-14 color-white">非试用内容，需要授权</p>
                                                </div>

                                                <Link to={"/paths/" + item.id}
                                                   target="_blank"
                                                   className="square-img">
                                                    <img src={item.image_url}/>
                                                </Link>

                                                    <div className="square-main">
                                                        <p className="task-hide">
                                                            <Link to={"/paths/" + item.id}
                                                               target="_blank"
                                                               title={item.name}
                                                               className="justify color-grey-name">
                                                                {item.name}
                                                            </Link>
                                                        </p>

                                                    <p className="clearfix mt8 font-12 color-grey-B4">
                                                      <Tooltip placement="bottom" title={"章节"}>
                                                          <span className="mr10 fl squareIconSpan">
                                                            <i className="iconfont icon-zhangjie1 fl mr3 iconfontzhangjie"></i>{item.stages_count}
                                                          </span>
                                                      </Tooltip>

                                                      {/*<Tooltip placement="bottom" title={"实训"}>*/}
                                                        {/*<span className="mr10 fl squareIconSpan">*/}
                                                             {/*<i className="iconfont icon-daima fl mr3 iconfontshixundaibeijing"></i>{item.shixuns_count}*/}
                                                         {/*</span>*/}
                                                      {/*</Tooltip>*/}

                                                      <Tooltip placement="bottom" title={"学习人数"}>
                                                        <span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
                                                             <i className="iconfont icon-chengyuan fl mr3" ></i>{item.members_count}
                                                        </span>
                                                      </Tooltip>
                                                        <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>

                                                    </p>

                                                </div>
                                            </div>
                                        )
                                    })
                                    }

                                </div>
                            </div>

                            {/*精选实训 改为 开发社区*/}
                            <div className="clearfix pt20 educontent pr pb20">
                                <div className="edu-txt-center">
                                    <p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>开发社区</p>
                                    <p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>
                                </div>
                                <Link to={"/shixuns"} className="moreitem">更多<i className="fa fa-angle-right ml5"></i></Link>

                                <div className="square-list clearfix" style={{width:'102%'}}>
                                    {homedatalist===undefined?"":homedatalist.shixuns.map((item,key)=>{
                                        return(
                                            <div className="square-Item" key={key} id={item.id} style={{width:'286px'}}>

                                                <div className="tag-green">
                                                    <span className="tag-name"> {item.tag_name}</span>
                                                    <img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>
                                                </div>

                                                <div className={item.power === false ? "closeSquare" : "none"}>
                                                    <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
                                                         className="mt80 mb25"/>
                                                    <p className="font-14 color-white">非试用内容，需要授权</p>
                                                </div>

                                                <Link to={"/shixuns/"+item.identifier+"/challenges"}
                                                      target="_blank"
                                                      className="square-img">
                                                    <img  src={item.pic}/>
                                                </Link>

                                                <div className="square-main">
                                                    <p className="task-hide">
                                                        <Link to={"/shixuns/"+item.identifier+"/challenges"}
                                                              target="_blank"
                                                              title={item.name}
                                                              className="justify color-grey-name">
                                                            {item.name}
                                                        </Link>
                                                    </p>

                                                    <p className="clearfix mt8 ml-3">
                                                            <span className="rateYoStar fl" style={{padding: '0px',height: '20px',lineHeight: '19px',cursor: 'default'}} title="">
                                                                  <Rating key={key} value={item.score_info===null?5:item.score_info} disabled allowHalf />
                                                            </span>
                                                        <span className="fl ml25 font-12 color-grey-9 lineh-12 mt4">{item.score_info===null?"5分":item.score_info+"分"}</span>
                                                    </p>

                                                    <p className="clearfix mt8 font-12 color-grey-B4">

                                                      <Tooltip placement="bottom" title={"关卡"}>
                                                          <span className="mr10 fl squareIconSpan">
                                                            <i className="iconfont icon-shixunguanqia fl mr3" ></i>{item.challenges_count}
                                                          </span>
                                                      </Tooltip>

                                                      {/*<Tooltip placement="bottom" title={"经验值"}>*/}
                                                        {/*<span className="mr10 fl squareIconSpan">*/}
                                                            {/*<i className="iconfont icon-jingyan fl mr3"></i>{item.exp}*/}
                                                        {/*</span>*/}
                                                      {/*</Tooltip>*/}

                                                      <Tooltip placement="bottom" title={"学习人数"}>
                                                          <span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
                                                             <i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
                                                          </span>
                                                      </Tooltip>

                                                      <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
                                                    </p>

                                                </div>
                                            </div>
                                        )
                                    })
                                    }


                                </div>
                            </div>



                            {/*导师排行榜*/}
                            <div className="pt60 pb60 mb30 mentor-ranking">
                                <div className="educontent">
                                    <div className="edu-txt-center">
                                        <p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>导师排行榜</p>
                                        <p className="color-grey-cd font-12">MENTOR RANKING</p>
                                    </div>

                                    <div className="ranking clearfix">
                                        <ul className="grade color-dark">
                                        {
                                            homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{

                                                if(key===1){
                                                    return(
                                                        <li className="mt35 pr" key={key}>
                                                            <img src={getImageUrl("images/educoder/huangguan-two.png")} className="huangguan" />
                                                            <a href={"/users/"+item.login} className="color-dark">
                                                                <img src={'/images/'+item.image_url} />
                                                                <span className="task-hide rankName">{item.username}</span>
                                                            </a>
                                                        </li>
                                                    )
                                                }
                                        })}
                                            {
                                                homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
                                                    if(key===0){
                                                        return(
                                                            <li className="pr" key={key}>
                                                                <img src={getImageUrl("images/educoder/huangguan.png")}  className="huangguan" />
                                                                <a href={"/users/"+item.login} className="color-dark">
                                                                    <img src={'/images/'+item.image_url} />
                                                                    <span className="task-hide rankName">{item.username}</span>
                                                                </a>
                                                            </li>
                                                        )
                                                    }
                                                })}
                                            {
                                                homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
                                                    if(key===2){
                                                        return(
                                                            <li className="mt35 pr" key={key}>
                                                                <img src={getImageUrl("images/educoder/huangguan-three.png")}  className="huangguan" />
                                                                <a href={"/users/"+item.login} className="color-dark">
                                                                    <img src={'/images/'+item.image_url} />
                                                                    <span className="task-hide rankName">{item.username}</span>
                                                                </a>
                                                            </li>
                                                        )
                                                    }
                                                })}
                                        </ul>
                                        <br />
                                            <ul className="grade mt30">
                                                {
                                                    homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
                                                        if(key>2) {
                                                            return (
                                                                <li key={key}>
                                                                    <a href={"/users/"+item.login} className="color-dark">
                                                                        <img src={'/images/'+item.image_url}/>
                                                                        <span className="task-hide rankName">{item.username}</span>
                                                                    </a>
                                                                </li>
                                                            )
                                                        }
                                                    })}


                                            </ul>
                                    </div>


                                </div>
                            </div>

                            {/*程序员排行榜*/}
                            <div className="pt60 pb60 mb30 pro-ranking">
                                <div className="educontent">
                                    <div className="edu-txt-center">
                                        <p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>程序员排行榜</p>
                                        <p className="color-grey-cd font-12">PROGRAMMER RANKING</p>
                                    </div>
                                    <div className="ranking clearfix">
                                    <ul className="grade color-dark">
                                        {
                                            homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
                                                if(key===1){
                                                    return(
                                                        <li className="mt35 pr" key={key}>
                                                            <img src={getImageUrl("images/educoder/huangguan-two.png")} className="huangguan" />
                                                            <a href={"/users/"+item.login} className="color-dark">
                                                                <img src={'/images/'+item.image_url} />
                                                                <span className="task-hide rankName">{item.username}</span>
                                                            </a>
                                                        </li>
                                                    )
                                                }
                                            })}
                                        {
                                            homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
                                                if(key===0){
                                                    return(
                                                        <li className="pr" key={key}>
                                                            <img src={getImageUrl("images/educoder/huangguan.png")}  className="huangguan" />
                                                            <a href={"/users/"+item.login} className="color-dark">
                                                                <img src={'/images/'+item.image_url} />
                                                                <span className="task-hide rankName">{item.username}</span>
                                                            </a>
                                                        </li>
                                                    )
                                                }
                                            })}
                                        {
                                            homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
                                                if(key===2){
                                                    return(
                                                        <li className="mt35 pr" key={key}>
                                                            <img src={getImageUrl("images/educoder/huangguan-three.png")}  className="huangguan" />
                                                            <a href={"/users/"+item.login} className="color-dark">
                                                                <img src={'/images/'+item.image_url} />
                                                                <span className="task-hide rankName">{item.username}</span>
                                                            </a>
                                                        </li>
                                                    )
                                                }
                                            })}
                                    </ul>
                                    <br />
                                    <ul className="grade mt30">
                                        {
                                            homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
                                                if(key>2) {
                                                    return (
                                                        <li key={key}>
                                                            <a href={"/users/"+item.login} className="color-dark">
                                                                <img src={'/images/'+item.image_url}/>
                                                                <span className="task-hide rankName">{item.username}</span>
                                                            </a>
                                                        </li>
                                                    )
                                                }
                                            })}


                                    </ul>
                                </div>
                                </div>
                            </div>
                        </div>
									</Spin>
            </div>
        );
    }
}

export default SnackbarHOC() (TPMIndexHOC  ( ShixunsHome ));