import size from 'lodash/size'

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

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

import {
  ButtonBox,
  Container,
  DropdownWrapper,
  List,
  SettingsButton,
  Wrapper,
} from './styled'

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

export const isEqual = (target: PlaylistOption, selected?: PlaylistOption) => (
  target.id === selected?.id && target.type === selected.type
)

export const MatchSidePlaylists = ({
  onSelect,
  openPopup,
  playlists,
  profile,
  selectedPlaylist,
}: Props) => {
  const playersCount = size(playlists.players.team1) + size(playlists.players.team2)

  return (
    <Wrapper>
      <Container>
        <MatchPlaylists
          playlists={playlists.match}
          selectedMathPlaylist={selectedPlaylist}
          onSelect={onSelect}
        />
        <DropdownWrapper>
          <DropdownSection
            itemsCount={size(playlists.interview)}
            title={playlists.lexics?.interview}
          >
            <SideInterviews
              interviews={playlists.interview}
              selectedMathPlaylist={selectedPlaylist}
              onSelect={onSelect}
            />
          </DropdownSection>
          <ButtonBox>
            <SettingsButton onClick={openPopup} />
          </ButtonBox>
          <DropdownSection
            isOpen={selectedPlaylist?.type === PlaylistTypes.PLAYER}
            itemsCount={playersCount}
            title={playlists.lexics?.players}
          >
            <List>
              <PlayersPlaylists
                teamName={profile?.team1}
                players={playlists.players.team1}
                selectedMathPlaylist={selectedPlaylist}
                onSelect={onSelect}
              />
              <PlayersPlaylists
                teamName={profile?.team2}
                players={playlists.players.team2}
                selectedMathPlaylist={selectedPlaylist}
                onSelect={onSelect}
              />
            </List>
          </DropdownSection>
        </DropdownWrapper>
      </Container>
    </Wrapper>
  )
}