import React from 'react';
import PropTypes from 'prop-types';
import { circle, deg0, deg30, deg60, deg90, deg120, deg150, deg180, deg210, deg240, deg270, deg300, deg330 } from './timepicker.css'
import { iideg0, ideg0, ideg30, ideg60, ideg90, ideg120, ideg150, ideg180, ideg210, ideg240, ideg270, ideg300, ideg330 } from './timepicker.css'



class TimePicker extends React.Component{
  constructor(props) {
    super(props);
    this.state = {onTimePick: this.props.onTimePick, format: this.props.format, hour: '01', minute: '01'};
    this.changeHour = this.changeHour.bind(this);
    this.changeMinute = this.changeMinute.bind(this);
  }

  changeHour(e, hour) {
    this.setState({hour});
  }

  changeMinute(e, minute) {
    this.setState({minute});
    this.onTimePick(this.state.hour, this.state.minute)
  }


  render() {
    const { onTimePick, format, hour, minute, changeHour, changeMinute } = this.state;
    if(format == 24){
      return (
        <div>
        <ul className={`${circle}`}>
          <li className={`${deg0}`} onClick={(e) => this.changeHour(e, '3')}>3</li>
          <li className={`${deg30}`} onClick={(e) => this.changeMinute(e, '4')}>4</li>
        </ul>
        <h2>hour: {this.state.hour}</h2>
        <h2>minute: {this.state.minute}</h2>
      </div>
      )
    }
    if(format == 12){}

  }
}


TimePicker.propTypes = {

    onTimePick: PropTypes.func.isRequired,
    format: PropTypes.string.isRequired,
    children: PropTypes.node
};



export default TimePicker;