import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar'
import {
  PlayerWrapper,
  Controls,
  PlayStop,
  Fullscreen,
} from 'features/StreamPlayer/styled'
import { VideoPlayer } from 'features/VideoPlayer'

import { ProgressBar } from './components/ProgressBar'
import { Settings } from './components/Settings'
import type { Props } from './hooks'
import { useMultiSourcePlayer } from './hooks'

export const MultiSourcePlayer = (props: Props) => {
  const {
    activeChapterIndex,
    activeSrc,
    chapters,
    duration,
    isFullscreen,
    loadedProgress,
    muted,
    onError,
    onFullscreenClick,
    onLoadedProgress,
    onPlayedProgress,
    onPlayerClick,
    onProgressChange,
    onQualitySelect,
    onReady,
    onVolumeChange,
    onVolumeClick,
    playedProgress,
    playing,
    playNextChapter,
    seek,
    selectedQuality,
    togglePlaying,
    videoQualities,
    videoRef,
    volume,
    volumeInPercent,
    wrapperRef,
  } = useMultiSourcePlayer(props)
  return (
    <PlayerWrapper
      ref={wrapperRef}
      playing={playing}
      onClick={onPlayerClick}
    >
      <VideoPlayer
        src={activeSrc}
        playing={playing}
        muted={muted}
        volume={volume}
        ref={videoRef}
        seek={seek}
        isFullscreen={isFullscreen}
        onLoadedProgress={onLoadedProgress}
        onPlayedProgress={onPlayedProgress}
        onEnded={playNextChapter}
        onError={onError}
        onReady={onReady}
      />
      <Controls>
        <PlayStop onClick={togglePlaying} playing={playing} />
        <VolumeBar
          value={volumeInPercent}
          muted={muted}
          onChange={onVolumeChange}
          onClick={onVolumeClick}
        />
        <ProgressBar
          activeChapterIndex={activeChapterIndex}
          duration={duration}
          chapters={chapters}
          onPlayedProgressChange={onProgressChange}
          playedProgress={playedProgress}
          loadedProgress={loadedProgress}
        />
        <Fullscreen onClick={onFullscreenClick} isFullscreen={isFullscreen} />
        <Settings
          onSelect={onQualitySelect}
          selectedQuality={selectedQuality}
          videoQualities={videoQualities}
        />
      </Controls>
    </PlayerWrapper>
  )
}