import type { Events, MatchInfo } from 'requests'

import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
import { MATCH_SIDE_PLAYLIST_WIDTH } from 'config'
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 { useMatchSidePlaylists } from './hooks'
import {
  Wrapper,
  TabsWrapper,
  Container,
} from './styled'

const tabPanes = {
  [Tabs.WATCH]: TabWatch,
  [Tabs.EVENTS]: TabEvents,
  [Tabs.LANGUAGES]: () => null,
}

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

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

  const TabPane = tabPanes[selectedTab]

  return (
    <Wrapper>
      <TabsWrapper>
        <TabsGroup buttons={3}>
          <Tab
            width={MATCH_SIDE_PLAYLIST_WIDTH[0]}
            selected={selectedTab === Tabs.WATCH}
            onClick={() => onTabClick(Tabs.WATCH)}
          >
            <T9n t='watch' />
          </Tab>
          <Tab
            width={MATCH_SIDE_PLAYLIST_WIDTH[1]}
            selected={selectedTab === Tabs.EVENTS}
            onClick={() => onTabClick(Tabs.EVENTS)}
          >
            <T9n t='actions' />
          </Tab>
          <Tab
            disabled
            width={MATCH_SIDE_PLAYLIST_WIDTH[2]}
            selected={selectedTab === Tabs.LANGUAGES}
            onClick={() => onTabClick(Tabs.LANGUAGES)}
          >
            <T9n t='commentators' />
          </Tab>
        </TabsGroup>
      </TabsWrapper>
      <Container>
        <TabPane
          events={events}
          onSelect={onSelect}
          playlists={playlists}
          profile={profile}
          selectedPlaylist={selectedPlaylist}
        />
      </Container>
    </Wrapper>
  )
}