import React,{PropTypes} from 'react';  
import 'rc-time-picker/assets/index.css';
import TimePicker from 'rc-time-picker'; 
import TimePickerLocale from 'rc-time-picker/lib/locale/zh_CN';
import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; // spm error
import DateTimeFormat from 'gregorian-calendar-format';
import GregorianCalendar from 'gregorian-calendar';
import moment from 'moment';
import cx from 'classnames'; 

 
const formatter = new DateTimeFormat('HH:mm:ss');
const formatterNoSecond = new DateTimeFormat('HH:mm');

const now = new GregorianCalendar(TimePickerLocale.calendar);


function onChange(value) {
  console.log(value && formatter.format(value));
}

 

export class MyTimePicker extends React.Component { 
	constructor(props) {
        super(props); 
        this.timeChange=this.timeChange.bind(this);
        this.state={
        	timeValue:now
        }
	}
	static propTypes = {  
	    defaultValue:PropTypes.string,
	    value:PropTypes.string, 
	    onChange:PropTypes.func,
	    placeholder:PropTypes.string,
	    config:PropTypes.object,
	    showSecond:PropTypes.bool
	}
	static defaultProps = { 
		disabled: false,
		showSecond:false,
		formatString:'HH:mm:ss'
	} 
	componentDidMount(){ 
		const {value}=this.props;
		const my = new GregorianCalendar(TimePickerLocale.calendar);
		if(value){
			my.setTime(new Date('2016/03/02 '+value+':00'));
		}else
			my.setTime(new Date('2016/03/02 00:00:00'));
		this.setState({
			timeValue:my
		})
	}
	timeChange(value){
		console.log(value && formatter.format(value));
		const {showSecond}=this.props;
		let time='';
		if(showSecond){
 			time=formatter.format(value); 
		}else{
			time=formatterNoSecond.format(value); 
		}
		this.props.onChange(time);
		this.setState({ timeValue:value });
	}
	render(){  
		const {showSecond,value}=this.props;
		const {timeValue}=this.state;
		return (  
	        <TimePicker formatter={showSecond?formatter:formatterNoSecond} locale={TimePickerLocale} 
              	showSecond={true} 
              	value={timeValue}
              	showSecond={showSecond}
              	animation="slide-up"
              	className="form-control"
              	onChange={this.timeChange} />  
		)
	}
}


export default MyTimePicker