import React, { FC } from 'react';
import { Text, View } from 'react-native';
import { Image } from 'expo-image';

import { getFontSize } from '../../../../utils';
import { API_HOST } from '../../../../constants';

import { Colors } from '../../../../theme';

import { ItemStyles } from './styles';

type Props = {
  name: string;
  flags: string;
  cnt: number | string;
  index: number;
};

export const SeriesItem: FC<Props> = (data) => {
  const flags: string[] = JSON.parse(data.flags);

  return (
    <View style={ItemStyles.wrapper}>
      <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
        {data.index + 1}
      </Text>
      <View style={ItemStyles.contentWrapper}>
        <View style={{ width: '85%' }}>
          {flags && (
            <View style={ItemStyles.withFlagWrapper}>
              {flags.map((flag, index) => (
                <Image
                  key={index}
                  style={[ItemStyles.smallFlag, index !== 0 && { marginLeft: -5 }]}
                  source={{ uri: API_HOST + '/img/flags_new/' + flag }}
                />
              ))}
            </View>
          )}
          <Text style={ItemStyles.nameAndCnt}>{data.name}</Text>
        </View>
        <Text style={ItemStyles.nameAndCnt}>{data.cnt}</Text>
      </View>
    </View>
  );
};
