import React from 'react'

import map from 'lodash/map'

import { SportTypes } from 'config'

import { Gender } from 'requests'

import { SportName } from 'features/Common'

import { useItemsList } from './hooks'
import {
  Logo,
  LogoWrapper,
  Item,
  ItemInfo,
  Name,
  StyledLink,
  TeamOrCountry,
  Wrapper,
  GenderComponent,
} from './styled'

type SearchItemsListProps = {
  close: () => void,
  list: Array<{
    color: string,
    fallbackImage: string,
    gender?: Gender,
    id: number,
    logo: string,
    name: string,
    profileUrl: string,
    sportType: SportTypes,
    teamOrCountry?: string,
  }>,
}

export const ItemsList = ({ close, list }: SearchItemsListProps) => {
  const {
    onError,
    ref,
  } = useItemsList()

  return (
    <Wrapper ref={ref}>
      {map(list, ({
        fallbackImage,
        gender,
        id,
        logo,
        name,
        profileUrl,
        sportType,
        teamOrCountry,
      }) => (
        <Item key={id}>
          <StyledLink to={profileUrl} onClick={close}>
            <LogoWrapper>
              <Logo
                data-src={logo}
                onError={onError(fallbackImage)}
              />
            </LogoWrapper>
            <ItemInfo>
              <Name>{name}</Name>
              <SportName sport={sportType} />
              <TeamOrCountry>{teamOrCountry}</TeamOrCountry>
            </ItemInfo>
            {gender && <GenderComponent type={gender} /> }
          </StyledLink>
        </Item>
      ))}
    </Wrapper>
  )
}