import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { debounce } from 'debounce'

import { setMaxLength, setWpm, setOffset } from '../store/actions'
import { Slider } from './Slider'
import { selectOffset } from '../store/selectors'

export const Options = () => {
  const dispatch = useDispatch()
  const maxLength = useSelector(state => state.maxLength)
  const wpm = useSelector(state => state.wpm)
  const offset = useSelector(selectOffset)

  return (
    <div>
      <h2>Options</h2>
      <Slider
        title={'Maximum segment length'}
        min={3}
        max={15}
        value={maxLength}
        onChange={debounce(val => dispatch(setMaxLength(val)), 100)}
      />
      <Slider
        title={'Words per minute'}
        min={100}
        max={1000}
        value={wpm}
        onChange={debounce(val => dispatch(setWpm(val)), 50)}
      />
      <Slider
        title={'Offset from center'}
        min={-50}
        max={50}
        value={offset}
        onChange={val => dispatch(setOffset(val))}
      />
    </div>
  )
}