import { Fragment } from 'react'

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

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

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

import { useLiveMatch } from './hooks'

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

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

  return (
    <Fragment>
      <Container>
        <StreamPlayer
          onPlayingChange={onPlayingChange}
          onProgressChange={onPlayerProgressChange}
          profile={profile}
          resumeFrom={resume}
          url={streamUrl}
        />
        <MatchDescription profile={profile} />
      </Container>

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