import React from 'react'
import { debounce } from 'debounce'

import { Slider } from './Slider'
import { selectOffset, selectLang } from '../store/selectors'
import { useSelector, useDispatch } from '../store/RSVPStore'
import { useTranslation } from 'react-i18next'

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

export const Options = () => {
  const { t } = useTranslation()
  const maxLength = useSelector(state => state.maxLength)
  const wpm = useSelector(state => state.wpm)
  const offset = useSelector(selectOffset)
  const lang = useSelector(selectLang)
  const { setMaxLength, setWpm, setOffset, setLang } = useDispatch()
  return (
    <div>
      <h2>{t('options.title')}</h2>
      <Slider
        title={t('options.maxLength')}
        min={3}
        max={15}
        value={maxLength}
        onChange={debounce(val => setMaxLength(val), 100)}
      />
      <Slider
        title={t('options.wpm')}
        min={100}
        max={1000}
        value={wpm}
        onChange={debounce(val => setWpm(val), 50)}
      />
      <Slider
        title={t('options.offset')}
        min={-50}
        max={50}
        value={offset}
        onChange={val => setOffset(val)}
      />
      <label>
        Language:
        <select value={lang} onChange={e => setLang(e.target.value)}>
          {availableLanguages.map(l => (
            <option key={l}>{l}</option>
          ))}
        </select>
      </label>
    </div>
  )
}