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 '../Chapters'
import type { Props } from './hooks'
import { useProgressBar } from './hooks'
import { ProgressBarList } from './styled'

export const ProgressBar = (props: Props) => {
  const { isScrubberVisible, onPlayedProgressChange } = props
  const progressBarRef = useSlider({ onChange: onPlayedProgressChange })
  const {
    calculatedChapters,
    playedProgressInPercent,
    time,
  } = useProgressBar(props)
  return (
    <ProgressBarList
      ref={progressBarRef}
    >
      <Chapters chapters={calculatedChapters} />
      {isScrubberVisible && (
        <ScrubberContainer>
          <Scrubber
            style={{ left: `${playedProgressInPercent}%` }}
          >
            <TimeTooltip time={time} />
          </Scrubber>
        </ScrubberContainer>
      )}
    </ProgressBarList>
  )
}