spa_instat_tv/src/features/MatchSidePlaylists/index.tsx

import {
  useEffect,
  useRef,
  useState,
} from 'react'

import type { TCircleAnimation, TSetCircleAnimation } from 'features/CircleAnimationBar'
import type { PlaylistOption } from 'features/MatchPage/types'
import { useMatchPageStore } from 'features/MatchPage/store'

import { useEventListener } from 'hooks'

import { isIOS } from 'config/userAgent'

import { Tabs } from './config'
import { TabEvents } from './components/TabEvents'
import { TabWatch } from './components/TabWatch'
import { TabPlayers } from './components/TabPlayers'
import { TabStats } from './components/TabStats'
import { useMatchSidePlaylists } from './hooks'
import {
  Wrapper,
  TabsWrapper,
  TabsGroup,
  Tab,
  TabIcon,
  TabTitle,
  Container,
} from './styled'

const tabPanes = {
  [Tabs.WATCH]: TabWatch,
  [Tabs.EVENTS]: TabEvents,
  [Tabs.STATS]: TabStats,
  [Tabs.PLAYERS]: TabPlayers,
}

type Props = {
  circleAnimation?: TCircleAnimation,
  onSelect: (option: PlaylistOption) => void,
  selectedPlaylist?: PlaylistOption,
  setCircleAnimation?: TSetCircleAnimation,
}

export const MatchSidePlaylists = ({
  circleAnimation,
  onSelect,
  selectedPlaylist,
  setCircleAnimation,
}: Props) => {
  const {
    hideProfileCard,
    matchPlaylists: playlists,
    profile,
    showProfileCard,
    tournamentData,
  } = useMatchPageStore()

  const {
    hasLessThanFourTabs,
    isEventTabVisible,
    isPlayersTabVisible,
    isStatsTabVisible,
    isWatchTabVisible,
    onTabClick,
    selectedTab,
  } = useMatchSidePlaylists()

  const TabPane = tabPanes[selectedTab]

  const containerRef = useRef<HTMLDivElement | null>(null)
  const tabPaneContainerRef = useRef<HTMLDivElement | null>(null)

  const [hasTabPaneScroll, setTabPaneScroll] = useState(false)

  useEffect(() => {
    const {
      clientHeight = 0,
      scrollHeight = 0,
    } = tabPaneContainerRef.current || {}
    const hasScroll = scrollHeight > clientHeight

    setTabPaneScroll(hasScroll)
  }, [
    playlists,
    selectedTab,
    tabPaneContainerRef.current?.clientHeight,
  ])

  useEventListener({
    callback: () => {
      const screenLandscape = isIOS ? window.orientation : window.screen.orientation.type
      const yOffset = containerRef.current?.scrollTop
      const isScreenLandscape = isIOS
        ? (screenLandscape === 90 || screenLandscape === -90)
        : (screenLandscape === 'landscape-primary' || screenLandscape === 'landscape-secondary')

      if (Number(yOffset) < 10) showProfileCard()
      if (Number(yOffset) > 10 && !isScreenLandscape) hideProfileCard()
    },
    event: 'scroll',
    target: containerRef,
  })

  return (
    <Wrapper ref={containerRef}>
      <TabsWrapper>
        <TabsGroup hasLessThanFourTabs={hasLessThanFourTabs}>
          {isWatchTabVisible ? (
            <Tab
              aria-pressed={selectedTab === Tabs.WATCH}
              onClick={() => onTabClick(Tabs.WATCH)}
            >
              <TabIcon icon='watch' />
              <TabTitle t='watch' />
            </Tab>
          ) : null}
          {isEventTabVisible ? (
            <Tab
              aria-pressed={selectedTab === Tabs.EVENTS}
              onClick={() => onTabClick(Tabs.EVENTS)}
            >
              <TabIcon icon='plays' />
              <TabTitle t='actions' />
            </Tab>
          ) : null}
          {isPlayersTabVisible ? (
            <Tab
              aria-pressed={selectedTab === Tabs.PLAYERS}
              onClick={() => onTabClick(Tabs.PLAYERS)}
            >
              <TabIcon icon='players' />
              <TabTitle t='players' />
            </Tab>
          ) : null}
          {isStatsTabVisible ? (
            <Tab
              aria-pressed={selectedTab === Tabs.STATS}
              onClick={() => onTabClick(Tabs.STATS)}
            >
              <TabIcon icon='stats' />
              <TabTitle t='stats' />
            </Tab>
          ) : null}
        </TabsGroup>

      </TabsWrapper>
      <Container
        hasScroll={hasTabPaneScroll}
        ref={tabPaneContainerRef}
      >
        <TabPane
          setCircleAnimation={setCircleAnimation}
          circleAnimation={circleAnimation}
          tournamentData={tournamentData}
          onSelect={onSelect}
          playlists={playlists}
          profile={profile}
          selectedPlaylist={selectedPlaylist}
        />
      </Container>
    </Wrapper>
  )
}