import React from 'react'
import styles from './index.less'
import PropTypes from 'prop-types'


class Time extends React.Component {
    constructor() {
        super();
    }

    handleHourChange(value){
        if(value!==value){value=0}
        else if(value>=24) {value=23}
        else if(value<0) {value=0}
        this.props.handleChange({
            day:this.props.day,
            hour:value,
            minute:this.props.minute,
            second:this.props.second,
        });
    }

    handleMinuteChange(value){
        if(value!==value){value=0}
        else if(value>=60) {value=59}
        else if(value<0) {value=0}
        this.props.handleChange({
            day:this.props.day,
            hour:this.props.hour,
            minute:value,
            second:this.props.second,
        });
    }

    handleSecondChange(value){
        if(value!==value){value=0}
        else if(value>=60) {value=59}
        else if(value<0) {value=0}
        this.props.handleChange({
            day:this.props.day,
            hour:this.props.hour,
            minute:this.props.minute,
            second:value,
        });
    }

    render() {
        return (
            <div className={styles.wrapper}>
                <input className={styles.input} value={this.props.hour} onInput={(e)=>this.handleHourChange(window.parseInt(e.target.value))} />&nbsp;{'时'}&nbsp;
                <input className={styles.input} value={this.props.minute} onInput={(e)=>this.handleMinuteChange(window.parseInt(e.target.value))}/>&nbsp;{'分'}&nbsp;
                <input className={styles.input} value={this.props.second} onInput={(e)=>this.handleSecondChange(window.parseInt(e.target.value))}/>&nbsp;{'秒'}
            </div>
        )
    }
}

export default Time;

Time.propTypes={
    hour:PropTypes.number,
    minute:PropTypes.number,
    second:PropTypes.number,
    handleChange:PropTypes.func
};