import { h, Component } from 'preact'

class TextInput extends Component {
  constructor(props){
    super(props)
    this.handleInput = this.handleInput.bind(this)
    this.handleKeydown = this.handleKeydown.bind(this)
  }
  handleInput(e){
    this.props.onInput && this.props.onInput(e.target.value)
  }
  handleKeydown(e){
    if (e.keyCode === 13) {
      this.props.onSave && this.props.onSave(e.target.value)
    }
  }
  render() {
    return (
      <div className='textInput param'>
        <label>
          <span>{this.props.title}</span>
          <input
            type='text'
            value={this.props.value}
            onInput={this.handleInput}
            onKeydown={this.handleKeydown}
            placeholder={this.props.placeholder}
            autofocus={this.props.autofocus}
          />
        </label>
      </div>
    )
  }
}

export default TextInput