import React from 'react'
import style from './index.less'
import PropTypes from 'prop-types'
import YearItem from '../YearItem'
import MonthItem from '../MonthItem'
import $ from 'jquery'

class YearList extends React.Component {
    constructor(props) {
        super(props);
        this.max=props.canSelectFuture?Infinity:new Date().getFullYear();
        this.state={
            start:props.select-7,
            listIsShow:false
        }
    }


    genItems(){
        const Items=[];
        for(let i=this.state.start,li=this.state.start+14;i<li;i++){
            Items.push(<YearItem key={i} value={i} select={this.props.select} handleClick={this.props.handleChange} max={this.max}/>)
        }
        return Items;
    }

    handleYearUp(){
        this.setState((preState)=>({start:preState.start-14}));
    }
    handleYearDown(){
        if(this.state.start+14>=this.max){
            return;
        }
        this.setState((preState)=>({start:preState.start+14}));
    }

    handleYearLeft(){
        const year=this.props.select-1;
        this.props.handleChange(year);
        if(year<this.state.start){
            this.setState((preState)=>({start:preState.start-14}));
        }
    }

    handleYearRight(){
        const year=this.props.select+1;
        if(year>this.max){
            return;
        }
        this.props.handleChange(year);
        if(year-this.state.start>=14){
            this.setState((preState)=>({start:preState.start+14}));
        }
    }

    handleShowList(){
        this.setState({
            start:this.props.select-7,
        });
        $(this.list).slideDown(()=>{
            this.setState({
                listIsShow:true
            })
        })
    }

    handleHideList(){
        $(this.list).slideUp(()=>{
            this.setState({
                listIsShow:false
            })
        })
    }

    genListStyle(){
        return {
            display:this.state.listIsShow?'block':'none'
        }
    }

    render() {
        return (
            <div className={style.wrapper} onMouseLeave={()=>this.handleHideList()}>
                <div className={`${style.toggle} ${style.left}`} onClick={()=>this.handleYearLeft()}>
                    <div className={style.arrow}/>
                </div>
                <div className={style.text} onClick={()=>this.handleShowList()}>
                    <span>{`${this.props.select}年`}</span>
                    <div className={style.arrow}/>
                </div>
                <div className={`${style.toggle} ${style.right}`} onClick={()=>this.handleYearRight()}>
                    <div className={style.arrow}/>
                </div>
                <div className={style.list} ref={(list)=>this.list=list} style={this.genListStyle()}>
                    <div className={`${style.toggle} ${style.up}`} onClick={()=>this.handleYearUp()}>
                        <div className={style.arrow}/>
                    </div>
                    <div className={style.items}>
                        {this.genItems()}
                    </div>
                    <div className={`${style.toggle} ${style.down}`} onClick={()=>{this.handleYearDown()}}>
                        <div className={style.arrow}/>
                    </div>
                </div>
            </div>
        )
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.canSelectFuture!==this.props.canSelectFuture){
            this.max=nextProps.canSelectFuture?Infinity:new Date().getFullYear();
        }
    }
}


YearList.propTypes={
    select:PropTypes.number,
    handleChange:PropTypes.func,
    canSelectFuture:PropTypes.bool
};


class MonthList extends React.Component {
    constructor() {
        super();
        const date=new Date();
        this.year=date.getFullYear();
        this.month=date.getMonth()+1;
        this.state={
            listIsShow:false
        }
    }

    genItems(){
        const Items=[];
        const len=this.props.canSelectFuture?12:this.props.year===this.year?this.month:12;
        for(let i=1;i<=len;i++){
            Items.push(<MonthItem key={i} value={i} select={this.props.select} handleClick={this.props.handleChange}/>)
        }
        return Items;
    }

    handleMonthLeft(){
        let month=this.props.select-1;
        if(month<1){
            month=1;
        }
        this.props.handleChange(month);
    }

    handleMonthRight(){
        let month=this.props.select+1;
        if(month>12 || (!this.props.canSelectFuture && (this.props.year===this.year && month>this.month))){
            return;
        }
        this.props.handleChange(month);
    }

    handleShowList(){
        $(this.list).slideDown(()=>{
            this.setState({
                listIsShow:true
            })
        })
    }

    handleHideList(){
        $(this.list).slideUp(()=>{
            this.setState({
                listIsShow:false
            })
        })
    }

    genListStyle(){
        return {
            display:this.state.listIsShow?'block':'none'
        }
    }

    render() {
        return (
            <div className={`${style.wrapper} ${style.month}`} onMouseLeave={()=>this.handleHideList()}>
                <div className={`${style.toggle} ${style.left}`} onClick={()=>this.handleMonthLeft()}>
                    <div className={style.arrow}/>
                </div>
                <div className={style.text} onClick={()=>this.handleShowList()}>
                    <span>{`${this.props.select}月`}</span>
                    <div className={style.arrow}/>
                </div>
                <div className={`${style.toggle} ${style.right}`} onClick={()=>this.handleMonthRight()}>
                    <div className={style.arrow}/>
                </div>
                <div className={style.list} ref={(list)=>this.list=list} style={this.genListStyle()}>
                    <div className={style.items}>
                        {this.genItems()}
                    </div>
                </div>
            </div>
        )
    }
}


MonthList.propTypes={
    select:PropTypes.number,
    handleChange:PropTypes.func,
    year:PropTypes.number,
    canSelectFuture:PropTypes.bool
};


export {
    YearList,
    MonthList
};
