import { Fragment } from 'react'

import map from 'lodash/map'

import { SportTypes, ProfileTypes } from 'config'
import { isMobileDevice } from 'config/userAgent'

import { Gender } from 'requests'

import type { ObjectWithName } from 'features/Name'
import { SportIcon } from 'components/SportIcon/SportIcon'

import {
  Item,
  ItemInfo,
  Name,
  Flag,
  StyledLink,
  TeamOrCountry,
  Wrapper,
} from './styled'

type SearchItemsListProps = {
  className?: string,
  close?: () => void,
  list: Array<{
    additionalInfo?: ObjectWithName & {
      id?: number,
    },
    gender?: Gender,
    id: number,
    name_eng: string,
    name_rus: string,
    profileType: ProfileTypes,
    sport: SportTypes,
  }>,
}

export const ItemsList = ({
  className,
  close,
  list,
}: SearchItemsListProps) => (
  <Wrapper className={className}>
    {map(list, (item) => (
      <Item key={item.id}>
        <StyledLink
          id={item.id}
          sportType={item.sport}
          profileType={item.profileType}
          onClick={close}
        >
          <Name nameObj={item} />
          <ItemInfo>
            <SportIcon size={isMobileDevice ? 10 : '0.65rem'} sport={item.sport} />
            {item.additionalInfo && (
              <Fragment>
                <Flag src={`https://cf-aws.insports.tv/media/flags/${item.additionalInfo.id}.png`} />
                <TeamOrCountry nameObj={item.additionalInfo} />
              </Fragment>
            )}
          </ItemInfo>
        </StyledLink>
      </Item>
    ))}
  </Wrapper>
)