import { Fragment } from 'react'

import isEmpty from 'lodash/isEmpty'
import size from 'lodash/size'

import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
import type { MatchInfo } from 'requests'

import { DropdownSection } from '../DropdownSection'
import { MatchPlaylists } from '../MatchPlaylists'
import { SideInterviews } from '../SideInterviews'
import { PlayersPlaylists } from '../PlayersPlaylists'

type Props = {
  onSelect: (option: PlaylistOption) => void,
  playlists: Playlists,
  profile: MatchInfo,
  selectedPlaylist?: PlaylistOption,
}

export const TabWatch = ({
  onSelect,
  playlists,
  profile,
  selectedPlaylist,
}: Props) => (
  <Fragment>
    <MatchPlaylists
      playlists={playlists.match}
      selectedMathPlaylist={selectedPlaylist}
      onSelect={onSelect}
    />
    <DropdownSection
      itemsCount={size(playlists.interview)}
      title={playlists.lexics?.interview}
    >
      <SideInterviews
        interviews={playlists.interview}
        selectedMathPlaylist={selectedPlaylist}
        onSelect={onSelect}
      />
    </DropdownSection>
    {!isEmpty(playlists.players.team1) && (
      <PlayersPlaylists
        profile={profile}
        players={playlists.players}
        selectedMathPlaylist={selectedPlaylist}
        onSelect={onSelect}
      />
    )}
  </Fragment>
)
