import { T9n } from 'features/T9n'
import { Loader } from 'features/Loader'
import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
import { Settings } from 'features/MultiSourcePlayer/components/Settings'
import { VideoPlayer } from 'features/VideoPlayer'

import { secondsToHms } from 'helpers'

import { VolumeBar } from './components/VolumeBar'
import { ProgressBar } from './components/ProgressBar'

import {
  PlayerWrapper,
  Controls,
  ControlsRow,
  ControlsGroup,
  CenterControls,
  PlayStop,
  Fullscreen,
  LoaderWrapper,
  Backward,
  Forward,
  PlaybackTime,
  ControlsGradient,
  LiveBtn,
} from './styled'
import type { Props } from './hooks'
import { useVideoPlayer } from './hooks'

export const StreamPlayer = (props: Props) => {
  const { profile, url } = props

  const {
    backToLive,
    controlsVisible,
    duration,
    isFullscreen,
    loadedProgress,
    muted,
    onDuration,
    onError,
    onFullscreenClick,
    onLoadedProgress,
    onMouseEnter,
    onMouseLeave,
    onMouseMove,
    onPlayedProgress,
    onPlayerClick,
    onProgressChange,
    onQualitySelect,
    onTouchEnd,
    onTouchStart,
    onVolumeChange,
    onVolumeClick,
    playedProgress,
    playing,
    ready,
    rewindBackward,
    rewindForward,
    seek,
    selectedQuality,
    startPlaying,
    togglePlaying,
    videoQualities,
    videoRef,
    volume,
    volumeInPercent,
    wrapperRef,
  } = useVideoPlayer(props)

  return (
    <PlayerWrapper
      ref={wrapperRef}
      playing={playing}
      onClick={onPlayerClick}
      onMouseMove={onMouseMove}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      {!ready && (
        <LoaderWrapper>
          <Loader color='#515151' />
        </LoaderWrapper>
      )}
      <VideoPlayer
        width='100%'
        height='100%'
        src={url}
        ref={videoRef}
        playing={playing}
        volume={volume}
        muted={muted}
        seek={seek}
        isFullscreen={isFullscreen}
        onLoadedProgress={onLoadedProgress}
        onPlayedProgress={onPlayedProgress}
        onDurationChange={onDuration}
        onEnded={togglePlaying}
        onReady={startPlaying}
        onError={onError}
        crossOrigin='use-credentials'
      />
      {ready && (
        <CenterControls playing={playing}>
          <Backward size='lg' onClick={rewindBackward}>
            {REWIND_SECONDS}
          </Backward>
          <PlayStop
            size='lg'
            marginRight={0}
            playing={playing}
            onClick={togglePlaying}
          />
          <Forward size='lg' onClick={rewindForward}>
            {REWIND_SECONDS}
          </Forward>
        </CenterControls>
      )}

      <Controls visible={controlsVisible}>
        <ControlsRow>
          <ProgressBar
            duration={duration}
            onPlayedProgressChange={onProgressChange}
            playedProgress={playedProgress}
            loadedProgress={loadedProgress}
          />
        </ControlsRow>
        <ControlsRow>
          <ControlsGroup>
            <PlayStop onClickCapture={togglePlaying} playing={playing} />
            <VolumeBar
              value={volumeInPercent}
              muted={muted}
              onChange={onVolumeChange}
              onClick={onVolumeClick}
            />
            <PlaybackTime>{secondsToHms(playedProgress / 1000)}</PlaybackTime>
            <Backward onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
            <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
          </ControlsGroup>
          <ControlsGroup>
            {
              profile?.live && (
                <LiveBtn onClick={backToLive}>
                  <T9n t='live' />
                </LiveBtn>
              )
            }
            <Fullscreen
              onClick={onFullscreenClick}
              isFullscreen={isFullscreen}
            />
            <Settings
              onSelect={onQualitySelect}
              selectedQuality={selectedQuality}
              videoQualities={videoQualities}
            />
          </ControlsGroup>
        </ControlsRow>
      </Controls>
      <ControlsGradient />
    </PlayerWrapper>
  )
}
