import { h, Component } from 'preact'

class NumberInput extends Component {
  constructor(props){
    super(props)
    this.state = { value: null, changed: false }
    this.handleInput = this.handleInput.bind(this)
    this.handleKeydown = this.handleKeydown.bind(this)
  }
  handleInput(e){
    this.setState({
      value: e.target.value,
      changed: true,
    })
    this.props.onInput && this.props.onInput(e.target.value, e.target.name)
    this.props.onChange && this.props.onChange(e.target.name, e.target.value)
  }
  handleKeydown(e){
    if (e.keyCode === 13) {
      this.setState({
        value: e.target.value,
        changed: false,
      })
      this.props.onSave && this.props.onSave(e.target.value, e.target.name)
    }
  }
  render() {
    return (
      <div className='numberInput param'>
        <label>
          <span>{this.props.title}</span>
          <input
            type={'number'}
            name={this.props.name || 'number'}
            value={this.state.changed ? this.state.value : this.props.value}
            onInput={this.handleInput}
            onKeydown={this.handleKeydown}
            placeholder={this.props.placeholder}
            autofocus={this.props.autofocus}
            min={this.props.min}
            max={this.props.max}
            step={this.props.step || this.props.type === 'int' ? 1 : 0.01}
          />
        </label>
      </div>
    )
  }
}

export default NumberInput