import { T9n } from 'features/T9n'
import { Settings } from 'features/MultiSourcePlayer/components/Settings'
import { AirPlay } from 'features/AirPlay'
import { ChromeCast } from 'features/ChromeCast'
import { AudioTracks } from 'features/AudioTracks'

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

export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) => {
  const { props } = controlsProps

  const {
    audioTracks,
    backToLive,
    changeAudioTrack,
    controlsVisible,
    isFullscreen,
    isLive,
    onFullscreenClick,
    onQualitySelect,
    playBackTime,
    progressBarElement,
    selectedAudioTrack,
    selectedQuality,
    src,
    videoQualities,
    videoRef,
  } = props

  return (
    <Controls isFullscreen={isFullscreen}>
      <ControlsRow visible={controlsVisible}>
        <PlaybackTime>
          {playBackTime}
        </PlaybackTime>

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