spa_instat_tv/src/features/MatchesSlider/index.tsx

import { useEffect } from 'react'

import map from 'lodash/map'
import isEmpty from 'lodash/isEmpty'

import type { Match } from 'helpers'

import { MatchCard } from 'features/MatchCard'

import { useMatchesSlider } from './hooks'
import {
  Wrapper,
  Arrow,
  Slides,
  ArrowButton,
} from './styled'

type MatchesSliderProps = {
  cardSize?: number,
  matches: Array<Match>,
}

const PADDING_PARENT = 10

export const MatchesSlider = ({ cardSize, matches }: MatchesSliderProps) => {
  const {
    isLeftArrowDisabled,
    isRightArrowDisabled,
    onScroll,
    onWrapperMouseEnter,
    onWrapperMouseLeave,
    showLeftArrow,
    showRightArrow,
    slideLeft,
    slideRight,
    slidesRef,
  } = useMatchesSlider(matches)

  const scrollToMatchByIndex = (index: number) => {
    if (slidesRef.current) {
      const match = slidesRef.current.querySelectorAll('li')[index]
      const offsetLeftCount = match.offsetLeft

      const offsetLeft = offsetLeftCount - PADDING_PARENT

      setTimeout(() => {
        slidesRef.current?.scrollBy({
          // @ts-ignore
          behavior: 'instant',
          left: offsetLeft,
        })
      }, 0)
    }
  }

  // скролл к лайв матчам или сегодняшней дате
  useEffect(() => {
    if (slidesRef.current) {
      const matchIndexLive = matches.findIndex(({ live }) => live)
      if (matchIndexLive !== -1) {
        scrollToMatchByIndex(matchIndexLive)
        return
      }

      const matchIndex = matches.findIndex((item) => new Date() <= item.date)
      if (matchIndex !== -1) {
        scrollToMatchByIndex(matchIndex)
        return
      }

      const slidesRefClientWidth = slidesRef.current.clientWidth
      const slidesRefScrollWidth = slidesRef.current.scrollWidth

      setTimeout(() => {
        slidesRef.current?.scrollBy({
        // @ts-ignore
          behavior: 'instant',
          left: slidesRefScrollWidth - slidesRefClientWidth + PADDING_PARENT,
        })
      }, 0)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  if (isEmpty(matches)) return null

  return (
    <Wrapper
      onMouseEnter={onWrapperMouseEnter}
      onMouseLeave={onWrapperMouseLeave}
    >
      {showLeftArrow && (
        <ArrowButton
          direction='left'
          onClick={slideLeft}
          disabled={isLeftArrowDisabled}
        >
          <Arrow
            disabled={isLeftArrowDisabled}
            direction='left'
          />
        </ArrowButton>
      )}
      <Slides
        ref={slidesRef}
        onScroll={onScroll}
        size={cardSize}
      >
        {map(matches, (match) => (
          <MatchCard
            match={match}
            key={match.id}
          />
        ))}
      </Slides>
      {showRightArrow && (
        <ArrowButton
          direction='right'
          onClick={slideRight}
          disabled={isRightArrowDisabled}
        >
          <Arrow
            disabled={isRightArrowDisabled}
            direction='right'
          />
        </ArrowButton>
      )}
    </Wrapper>
  )
}