import React from 'react'
import {
  FiSkipBack,
  FiSkipForward,
  FiRewind,
  FiFastForward
} from 'react-icons/fi'
import { useDispatch, useSelector } from '../store'
import { IconButton } from '../styles/IconButton'

import {
  selectHasNextSentence,
  selectHasPrevSentence,
  selectHasPrevWord,
  selectHasNextWord
} from '../store/selectors'

export const SegmentControl = ({ children }) => {
  const hasPrevSentence = useSelector(selectHasPrevSentence)
  const hasNextSentence = useSelector(selectHasNextSentence)
  const hasPrevWord = useSelector(selectHasPrevWord)
  const hasNextWord = useSelector(selectHasNextWord)

  const { decSentence, decWord } = useDispatch()
  const { incSentence, incWord } = useDispatch()
  return (
    <>
      <IconButton
        title="Previous Sentence"
        onClick={() => decSentence()}
        Icon={FiRewind}
        disabled={!hasPrevSentence}
      />
      <IconButton
        Icon={FiSkipBack}
        title="Previous Word"
        onClick={() => decWord()}
        disabled={!hasPrevWord}
      />
      {children}
      <IconButton
        Icon={FiSkipForward}
        title="Next Word"
        onClick={() => incWord()}
        disabled={!hasNextWord}
      />
      <IconButton
        Icon={FiFastForward}
        title="Next Sentence"
        onClick={() => incSentence()}
        disabled={!hasNextSentence}
      />
    </>
  )
}