import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
import { Scrubber, ScrubberContainer } from 'features/StreamPlayer/components/ProgressBar/styled'

import { Chapters } from 'features/StreamPlayer/components/Chapters'
import type { Props } from './hooks'
import { useProgressBar } from './hooks'
import { ProgressBarList } from './styled'
import { isIOS } from '../../../../config/userAgent'

export interface ProgressBarProps extends Props {
  isScrubberVisible?: boolean,
}

export const ProgressBar = (props: ProgressBarProps) => {
  const {
    isScrubberVisible,
    onPlayedProgressChange,
    onTouchEnd,
    onTouchStart,
  } = props

  const progressBarRef = useSlider({
    onChange: onPlayedProgressChange,
    onTouchEnd,
    onTouchStart,
  })

  const {
    calculatedChapters,
    playedProgressInPercent,
    time,
  } = useProgressBar(props)

  return (
    <ProgressBarList
      ref={progressBarRef}
      isIOS={isIOS}
    >
      <Chapters chapters={calculatedChapters} />
      {isScrubberVisible && (
        <ScrubberContainer>
          <Scrubber
            isIOS={isIOS}
            style={{ left: `${playedProgressInPercent}%` }}
          >
            <TimeTooltip time={time} />
          </Scrubber>
        </ScrubberContainer>
      )}
    </ProgressBarList>
  )
}