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

import { Chapters } from '../Chapters'
import type { Props } from './hooks'
import { useProgressBar } from './hooks'
import { ProgressBarList } from './styled'

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

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

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

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