import React from 'react'
import { useSelector } from '../store'
import classNames from 'classnames'

import { getNextSmallerNumber } from '../lib/array-util.js'
import {
  selectParsedText,
  selectCurrentSegmentIndex,
  selectSegmentWindow
} from '../store/selectors.js'

import styles from './TextOutput.css'

export const TextOutput = () => {
  const { segments, offset } = useSelector(selectSegmentWindow)
  const { sentences, words } = useSelector(selectParsedText)
  const curSegment = useSelector(selectCurrentSegmentIndex)
  return (
    <>
      <div>
        {segments.map((segment, idx) => {
          idx = idx + offset
          const isCurrent = curSegment === idx
          const isWordStart = words.includes(idx)
          const wordBeginning = isWordStart
            ? idx
            : getNextSmallerNumber(idx, words)
          const isSentenceStart = sentences.includes(wordBeginning)

          return (
            <span key={idx}>
              {isWordStart && ' '}
              <span
                className={classNames({
                  [styles.current]: isCurrent,
                  [styles.sentenceBeginning]: isSentenceStart
                })}
              >
                {segment}
              </span>
            </span>
          )
        })}
      </div>
    </>
  )
}