import { Fragment } from 'react'

import isEmpty from 'lodash/isEmpty'

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 { MatchDescription } from '../MatchDescription'
import { useMatchPageStore } from '../../store'

export const FinishedMatch = () => {
  const { isOpenPopup, profile } = useMatchPageStore()
  const {
    chapters,
    closeSettingsPopup,
    isSettingsPopupOpen,
    onPlayingChange,
    onPlaylistSelect,
    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) && (
          <Fragment>
            <MultiSourcePlayer
              isOpenPopup={isOpenPopup}
              chapters={chapters}
              onPlayingChange={onPlayingChange}
              profile={profile}
            />
            <MatchDescription />
          </Fragment>
        )}
      </Container>

      <MatchSidePlaylists
        selectedPlaylist={selectedPlaylist}
        onSelect={onPlaylistSelect}
      />
    </Fragment>
  )
}