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

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

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

  return (
    <div>
      <Slider
        title={'Maximum segment length'}
        min={3}
        max={15}
        value={maxLength}
        onChange={useCallback(
          debounce(val => dispatch(setMaxLength(val)), 100, true),
          [dispatch]
        )}
      />
      <Slider
        title={'Words per minute'}
        min={100}
        max={1000}
        value={wpm}
        onChange={debounce(val => dispatch(setWpm(val)), 50)}
      />
    </div>
  )
}