import { Fragment } from 'react'

import isEmpty from 'lodash/isEmpty'

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

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

import { SettingsPopup } from '../SettingsPopup'

import { useFinishedMatch } from './hooks'
import { Container } from '../../styled'
import { Modal } from './styled'
import { TournamentData } from '../../types'

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

export const FinishedMatch = ({
  events,
  profile,
  tournamentData,
}: Props) => {
  const {
    chapters,
    closeSettingsPopup,
    isSettingsPopupOpen,
    onPlayingChange,
    onPlaylistSelect,
    playlists,
    selectedPlaylist,
    setEpisodesSettings,
  } = useFinishedMatch()

  return (
    <Fragment>
      <Modal
        close={closeSettingsPopup}
        isOpen={isSettingsPopupOpen}
        withCloseButton={false}
      >
        <SettingsPopup
          onWatchEpisodesClick={setEpisodesSettings}
          closePopup={closeSettingsPopup}
          profile={profile}
          selectedPlaylist={selectedPlaylist}
        />
      </Modal>

      <Container>
        {!isEmpty(chapters) && (
          <MultiSourcePlayer
            chapters={chapters}
            onPlayingChange={onPlayingChange}
          />
        )}
      </Container>

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