import React from 'react'
import ReactDOM from 'react-dom'
import Picker from 'react-month-picker'

    
    

class MonthBox extends React.Component{
	static propTypes={
            value: React.PropTypes.string,
			onClick: React.PropTypes.func
        }

	constructor(props) {
        super(props);
		this.handleClick = this.handleClick.bind(this);
        this.state={
			value:this.props.value || 'N/A'	 
        }    
    }

	componentWillReceiveProps(nextProps){
            this.setState({
                value: nextProps.value || 'N/A'
            })
        }

	 handleClick(e) {
            this.props.onClick && this.props.onClick(e)
        }

	render() {

            return (
                <div className="box" onClick={this.handleClick}>
                    <label>{this.state.value}</label>
                </div>
            )
        }
   	}



class MonthPicker extends React.Component{
        static propTypes ={}
		constructor(props){
			super(props); 
			this.handleClickMonthBox = this.handleClickMonthBox.bind(this);
			this.handleAMonthChange = this.handleAMonthChange.bind(this);
			this.handleAMonthDissmis = this.handleAMonthDissmis.bind(this);

			this.state={value:{year:2016, month:3}};
		}	
       
		componentWillReceiveProps(nextProps){
			const value = nextProps.value;
			if(value){
		     this.setState({
                  value: value
			    });
			}
        }

	    handleClickMonthBox(e) {
            this.refs.pickAMonth.show()
        }

        handleAMonthChange(year, month) {
			const mValue={year:year,month:month};

			this.setState({
				value:mValue
			});
			this.props.onChange(mValue);

        }
        
		handleAMonthDissmis(value) {
            this.setState( {value: value} )
        }


		render() {

            let pickerLang = {
                    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    , from: 'From', to: 'To'
                };
            const mvalue = this.state.value;

            let makeText = m => {
                if (m && m.year && m.month) return (m.year+'-'+m.month)
                return '?'
            }

            return (
                <ul>
                    <li>
                        <div className="edit">
                            <Picker
                                ref="pickAMonth"
                                years={[2016, 2017,2018,2019,2020]}
                                value={mvalue}
                                lang={pickerLang.months}
                                onChange={this.handleAMonthChange}
                                onDismiss={this.handleAMonthDissmis}
                                >
                                <MonthBox value={makeText(mvalue)} onClick={this.handleClickMonthBox} />
                            </Picker>
                        </div>
                    </li>
                </ul>
            )
        }
	}

export default MonthPicker