import React from 'react';
import ReactDOM from 'react-dom';
import TimePicker from '..';
import moment from 'moment';

interface IProps {
  onChange: (val: any) => void;
}

interface IState {
  value: any;
}

class ControlledTimePicker extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      value: moment('12:00:00', 'HH:mm:ss', true),
    };
  }

  onSelect = value => {
    this.setState({ value });
    this.props.onChange(value);
  };

  render() {
    return <TimePicker value={this.state.value} onChange={this.onSelect} />;
  }
}

ReactDOM.render(
  <ControlledTimePicker
    onChange={val => console.log(val.format('HH:mm:ss'))}
  />,
  document.getElementById('time-picker-demo-4'),
);