import Button from '../../button';
import NumberPicker from '..';
import React from 'react';
import ReactDOM from 'react-dom';
interface PageStates {
  editable: boolean;
  value: number;
}
class App extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);
    this.state = {
      editable: false,
      value: 0,
    };
  }

  toogle() {
    this.setState({
      editable: !this.state.editable,
    });
  }

  onChange(value) {
    console.log('changed', value);
    this.setState({
      value,
    });
  }

  render() {
    return (
      <div>
        <NumberPicker
          onChange={this.onChange.bind(this)}
          value={this.state.value}
          editable={this.state.editable}
        />
        <br />
        <br />
        <Button onClick={this.toogle.bind(this)}>
          Toggle to {!this.state.editable ? 'editable' : 'uneditable'}
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('number-picker-demo-2'));