class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keyboardText: '1234'
    }
    this.keyboardRef = false;
    this.handleKeyboardRef = this.handleKeyboardRef.bind(this);
  }
  handleKeyboardEnterKey = () => {
    alert('sdfsdfsdf')
  }
  handleKeyboardRef = () => {

  }

  handleKeyboardInputText = (keyboardText) => {
    this.setState({ keyboardText })
  }

  handleKeyboardRef = (keyboard) => {
    this.keyboardRef = keyboard;
  }
  handleInputChange = (e) => {
    const value = e.target.value
    this.setState({ keyboardText: value }, () => {
      this.keyboardRef.keyboard.setInput(value, 'kiosk')
    })
  }

  render() {
    const { keyboardText } = this.state;
    return (
      <div>
        <input type="text" name="kiosk" id="name" value={keyboardText} onChange={this.handleInputChange} readOnly />
        <KeyBoard onSubmitKey={this.handleKeyboardEnterKey} setInputText={this.handleKeyboardInputText} setKeyboardRef={this.handleKeyboardRef} />
      </div>
    );
  }
}