import { h, Component } from 'preact'
import { connect } from 'react-redux'

class Slider extends Component {
  render(){
    const props = this.props
    const name = props.name
    const title = props.title || name.replace(/_/g, ' ')
    let step;
    if (props.type === 'int') {
      step = 1
    } else {
      step = (props.max - props.min) / 100
    }
    return (
      <div class='slider'>
        <label>
          <span>{title}</span>
          <input type='text'
          />
        </label>
        <input
          type='range'
          min={props.min}
          max={props.max}
          step={step}
        />
      </div>
    )
  }
}

const mapStateToProps = state => ({
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  ...ownProps,
})

export default connect(mapStateToProps, mapDispatchToProps)(Slider)