import React from 'react'

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

import type { Match } from 'features/Matches'
import { MatchCard } from 'features/MatchCard'

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

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

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

  if (isEmpty(matches)) return null

  return (
    <Wrapper>
      {showLeftArrow && (
        <Arrow
          type='arrowLeft'
          aria-label='Slide left'
          onClick={slideLeft}
        />
      )}
      <Slides ref={slidesRef} onScroll={onScroll}>
        {map(matches, (match) => <MatchCard match={match} key={match.id} />)}
      </Slides>
      {showRightArrow && (
        <Arrow
          type='arrowRight'
          aria-label='Slide right'
          onClick={slideRight}
        />
      )}
    </Wrapper>
  )
}