import { Fragment } from 'react'

import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
import {
  ChaptersText,
  Next,
  Prev,
} from 'features/MultiSourcePlayer/styled'
import { Settings } from 'features/MultiSourcePlayer/components/Settings'
import { T9n } from 'features/T9n'
import { ChromeCast } from 'features/ChromeCast'
import { AudioTracks } from 'features/AudioTracks'

import { PiP } from 'components/PictureInPicture/PiP'

import { ControlsPropsExtended } from '../..'
import { VolumeBar } from '../../../VolumeBar'
import {
  Backward,
  Controls,
  ControlsGroup,
  ControlsRow,
  Forward,
  Fullscreen,
  LiveBtn,
  PlaybackTime,
  PlayStop,
} from '../../../../styled'

export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) => {
  const { props } = controlsProps
  const {
    activeChapterIndex = 0,
    audioTracks,
    backToLive,
    changeAudioTrack,
    controlsVisible,
    isFirstChapterPlaying,
    isFullscreen,
    isLastChapterPlaying,
    isLive,
    isStorage,
    muted,
    numberOfChapters = 0,
    onFullscreenClick,
    onQualitySelect,
    onVolumeChange,
    onVolumeClick,
    playBackTime,
    playing,
    playNextChapter,
    playPrevChapter,
    progressBarElement,
    rewindBackward,
    rewindForward,
    selectedAudioTrack,
    selectedQuality,
    src,
    togglePlaying,
    videoQualities,
    videoRef,
    volumeInPercent,
  } = props

  return (
    <Controls visible={controlsVisible}>
      <ControlsRow>
        {progressBarElement}
      </ControlsRow>
      <ControlsRow>
        <ControlsGroup>
          <PlayStop
            playing={playing}
            onClickCapture={togglePlaying}
          />
          {!isLive && !isStorage && (
            <Fragment>
              <Prev
                disabled={isFirstChapterPlaying}
                onClick={() => playPrevChapter?.()}
              />
              <ChaptersText>
                {activeChapterIndex + 1} / {numberOfChapters}
              </ChaptersText>
              <Next
                disabled={isLastChapterPlaying}
                onClick={() => playNextChapter?.()}
              />
            </Fragment>
          )}
          <VolumeBar
            value={volumeInPercent}
            muted={muted}
            onChange={onVolumeChange}
            onClick={onVolumeClick}
          />
          <PlaybackTime>
            {playBackTime}
          </PlaybackTime>
          <Backward onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
          <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
        </ControlsGroup>

        <ControlsGroup>
          <AudioTracks
            audioTracks={audioTracks!}
            changeAudioTrack={changeAudioTrack!}
            selectedAudioTrack={selectedAudioTrack!}
          />
          {isLive && (
            <LiveBtn onClick={backToLive}>
              <T9n t='live' />
            </LiveBtn>
          )}
          <ChromeCast src={src} />
          {document.pictureInPictureEnabled && (
            <PiP videoRef={videoRef} isPlaying={playing} />
          )}
          <Settings
            onSelect={onQualitySelect}
            selectedQuality={selectedQuality}
            videoQualities={videoQualities}
          />
          <Fullscreen
            onClick={onFullscreenClick}
            isFullscreen={isFullscreen}
          />
        </ControlsGroup>
      </ControlsRow>
    </Controls>
  )
}
