import { Fragment } from 'react'

import type { Events } from 'requests/getMatchEvents'
import type { MatchInfo } from 'requests/getMatchInfo'

import { StreamPlayer } from 'features/StreamPlayer'
import { YoutubePlayer } from 'features/StreamPlayer/components/YoutubePlayer'
import { MatchSidePlaylists } from 'features/MatchSidePlaylists'

import { isMobileDevice } from 'config/userAgent'

import { Container } from '../../styled'

import { useLiveMatch } from './hooks'
import { TournamentData } from '../../types'
import { MatchProfileCardMobile } from '../MatchProfileCardMobile'

type Props = {
  events: Events,
  profile: MatchInfo,
  tournamentData: TournamentData,
}

export const LiveMatch = ({
  events,
  profile,
  tournamentData,
}: Props) => {
  const {
    matchPlaylists,
    onPlayerProgressChange,
    onPlayingChange,
    onPlaylistSelect,
    resume,
    selectedPlaylist,
    streamUrl,
  } = useLiveMatch(profile)

  const Player = profile?.youtube_link ? YoutubePlayer : StreamPlayer

  return (
    <Fragment>
      <Container>
        <Player
          onPlayingChange={onPlayingChange}
          onProgressChange={onPlayerProgressChange}
          profile={profile}
          resumeFrom={resume}
          url={streamUrl}
        />
        {isMobileDevice ? <MatchProfileCardMobile profile={profile} /> : null}
      </Container>

      <MatchSidePlaylists
        tournamentData={tournamentData}
        events={events}
        onSelect={onPlaylistSelect}
        playlists={matchPlaylists}
        profile={profile}
        selectedPlaylist={selectedPlaylist}
      />
    </Fragment>
  )
}