import type { ComponentProps } from 'react'
import { createPortal } from 'react-dom'

import { isMobileDevice } from 'config'

import { getTeamAbbr } from 'helpers'

import { useModalRoot } from 'hooks'

import { T9n } from 'features/T9n'
import { useMatchPageStore } from 'features/MatchPage/store'
import { Name } from 'features/Name'
import { useLexicsStore } from 'features/LexicsStore'

import { Tabs } from './config'
import { useTabStats } from './hooks'
import { PlayersTable } from '../PlayersTable'
import { TeamsStatsTable } from '../TeamsStatsTable'

import {
  Container,
  Header,
  TabList,
  Tab,
  Switch,
  SwitchTitle,
  SwitchButton,
  Tooltip,
  TabTitle,
} from './styled'

const tabPanes = {
  [Tabs.TEAMS]: TeamsStatsTable,
  // eslint-disable-next-line react/jsx-props-no-spreading
  [Tabs.TEAM1]: (props: ComponentProps<typeof PlayersTable>) => <PlayersTable {...props} />,
  // eslint-disable-next-line react/jsx-props-no-spreading
  [Tabs.TEAM2]: (props: ComponentProps<typeof PlayersTable>) => <PlayersTable {...props} />,
}

export const TabStats = () => {
  const {
    isFinalStatsType,
    isTooltipShown,
    isVisibleTeam1PlayersTab,
    isVisibleTeam2PlayersTab,
    isVisibleTeamsTab,
    onMouseLeave,
    onMouseOver,
    selectedTab,
    setSelectedTab,
    switchButtonTooltipLexic,
    switchTitleLexic,
    toggleStatsType,
    tooltipStyle,
    tooltipText,
  } = useTabStats()
  const { profile: matchProfile } = useMatchPageStore()
  const { suffix, translate } = useLexicsStore()

  const modalRoot = useModalRoot()

  const TabPane = tabPanes[selectedTab]

  if (!matchProfile) return null

  const { team1, team2 } = matchProfile

  return (
    <Container>
      <Header>
        <TabList>
          {isVisibleTeamsTab && (
            <Tab
              aria-pressed={selectedTab === Tabs.TEAMS}
              onClick={() => setSelectedTab(Tabs.TEAMS)}
            >
              <TabTitle>
                <T9n t='team' />
              </TabTitle>
            </Tab>
          )}
          {isVisibleTeam1PlayersTab && (
            <Tab
              aria-pressed={selectedTab === Tabs.TEAM1}
              onClick={() => setSelectedTab(Tabs.TEAM1)}
            >
              <TabTitle
                onMouseOver={isMobileDevice
                  ? undefined
                  : onMouseOver({
                    anchorId: 'team1Tab',
                    horizontalPosition: 'left',
                    indent: 25,
                    tooltipText: team1[`name_${suffix}`],
                  })}
                onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
              >
                <Name
                  id='team1Tab'
                  nameObj={{
                    name_eng: team1.abbrev_eng || getTeamAbbr(team1.name_eng),
                    name_rus: team1.abbrev_rus || getTeamAbbr(team1.name_rus),
                  }}
                />
              </TabTitle>
            </Tab>
          )}
          {isVisibleTeam2PlayersTab && (
            <Tab
              aria-pressed={selectedTab === Tabs.TEAM2}
              onClick={() => setSelectedTab(Tabs.TEAM2)}
            >
              <TabTitle
                onMouseOver={isMobileDevice
                  ? undefined
                  : onMouseOver({
                    anchorId: 'team2Tab',
                    horizontalPosition: 'left',
                    indent: 25,
                    tooltipText: team2[`name_${suffix}`],
                  })}
                onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
              >
                <Name
                  id='team2Tab'
                  nameObj={{
                    name_eng: team2.abbrev_eng || getTeamAbbr(team2.name_eng),
                    name_rus: team2.abbrev_rus || getTeamAbbr(team2.name_rus),
                  }}
                />
              </TabTitle>
            </Tab>
          )}
        </TabList>
        <Switch>
          <SwitchTitle t={switchTitleLexic} />
          <SwitchButton
            id='switchButton'
            isFinalStatsType={isFinalStatsType}
            onClick={toggleStatsType}
            onMouseOver={isMobileDevice
              ? undefined
              : onMouseOver({
                anchorId: 'switchButton',
                horizontalPosition: 'right',
                tooltipText: translate(switchButtonTooltipLexic),
              })}
            onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
          />
        </Switch>
      </Header>
      <TabPane
        teamId={selectedTab === Tabs.TEAM1 ? team1.id : team2.id}
      />
      {isTooltipShown && modalRoot.current && createPortal(
        <Tooltip style={tooltipStyle}>
          {tooltipText}
        </Tooltip>,
        modalRoot.current,
      )}
    </Container>
  )
}
