import { memo } from 'react'
import type { ListItemKeySelector } from 'react-window'
import { FixedSizeList } from 'react-window'

import styled, { css } from 'styled-components/macro'

import size from 'lodash/size'

import { isMobileDevice } from 'config/userAgent'

import { customScrollbar } from 'features/Common'

import type { ItemData } from '../TournamentListItem'
import { TournamentListItem } from '../TournamentListItem'

const getItemKey: ListItemKeySelector = (index, data) => {
  const tournament = data[index]

  return tournament
    ? `${tournament.sport}_${tournament.id}`
    : index
}

type Props = ItemData & {
  className?: string,
}

const List = memo((props: Props) => {
  const { className, tournaments } = props
  return (
    <FixedSizeList
      className={className}
      innerElementType='ul'
      width='100%'
      height={432}
      itemSize={isMobileDevice ? 36 : 24}
      itemCount={size(tournaments)}
      itemKey={getItemKey}
      itemData={props}
    >
      {TournamentListItem}
    </FixedSizeList>
  )
})

export const TournamentsList = styled(List)`
  width: 100%;
  height: 432px;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  overflow-y: auto;

  @media (max-width: 1370px) {
    height: 20rem !important;
  }

  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        height: 30rem !important;
      }

      @media (orientation: landscape){
        height: 10rem !important;
      }
    `
    : ''};

  ${customScrollbar}

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
`
