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

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

const availableLanguages = ['en', 'de']

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

  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))}
      />
      <label>
        Language:
        <select value={lang} onChange={e => dispatch(setLang(e.target.value))}>
          {availableLanguages.map(l => (
            <option key={l}>{l}</option>
          ))}
        </select>
      </label>
    </div>
  )
}