import type { Events, MatchInfo } from 'requests'

import type {
  PlaylistOption,
  Playlists,
  TournamentData,
} from 'features/MatchPage/types'
import { Tab, TabsGroup } from 'features/Common'
import { T9n } from 'features/T9n'

import { Tabs } from './config'
import { TabEvents } from './components/TabEvents'
import { TabWatch } from './components/TabWatch'
import { TabVideo } from './components/TabVideo'
import { useMatchSidePlaylists } from './hooks'
import {
  Wrapper,
  TabsWrapper,
  Container,
} from './styled'

const tabPanes = {
  [Tabs.WATCH]: TabWatch,
  [Tabs.EVENTS]: TabEvents,
  [Tabs.VIDEO]: TabVideo,
}

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

export const MatchSidePlaylists = ({
  events,
  onSelect,
  playlists,
  profile,
  selectedPlaylist,
  tournamentData,
}: Props) => {
  const {
    isEventTabVisible,
    isVideoTabVisible,
    isWatchTabVisible,
    onTabClick,
    selectedTab,
  } = useMatchSidePlaylists({
    events,
    playlists,
    tournamentData,
  })

  const TabPane = tabPanes[selectedTab]

  return (
    <Wrapper>
      <TabsWrapper>
        <TabsGroup>
          {isWatchTabVisible ? (
            <Tab
              selected={selectedTab === Tabs.WATCH}
              onClick={() => onTabClick(Tabs.WATCH)}
            >
              <T9n t='watch' />
            </Tab>
          ) : null}
          {isEventTabVisible ? (
            <Tab
              selected={selectedTab === Tabs.EVENTS}
              onClick={() => onTabClick(Tabs.EVENTS)}
            >
              <T9n t='actions' />
            </Tab>
          ) : null}
          {isVideoTabVisible ? (
            <Tab
              selected={selectedTab === Tabs.VIDEO}
              onClick={() => onTabClick(Tabs.VIDEO)}
            >
              <T9n t='video' />
            </Tab>
          ) : null}
        </TabsGroup>
      </TabsWrapper>
      <Container>
        <TabPane
          tournamentData={tournamentData}
          events={events}
          onSelect={onSelect}
          playlists={playlists}
          profile={profile}
          selectedPlaylist={selectedPlaylist}
        />
      </Container>
    </Wrapper>
  )
}
