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

import { StatisticItem } from './StatisticItem';
import { SeriesItem } from './SeriesItem';

import { ListType } from '../../../../database/statisticsService';
import {
  isType1,
  isType2,
  isType4,
  isType5,
  isType6,
  isType7,
  isType8,
  isType9,
  isType10
} from '../StatisticsListScreen/funcs';
import { getFontSize } from '../../../../utils';
import { API_HOST } from '../../../../constants';

import { ItemStyles } from './styles';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { NAVIGATION_PAGES } from 'src/types';

type Props = {
  blockIndex: number;
  item: ListType;
  ranking: any;
  idx: number;
  navigation: any;
};

export const RenderItem: FC<Props> = ({ item, blockIndex, ranking, idx, navigation }) => {
  if (isType1(item) || isType4(item) || isType5(item)) {
    return (
      <>
        {'megaregion' in item && (
          <View>
            {item.megaregion !== ranking[idx - 1]?.megaregion ? (
              <Text style={[ItemStyles.nameAndCnt, ItemStyles.headerWrapper]}>
                {item.megaregion as string}
              </Text>
            ) : null}
          </View>
        )}
        <StatisticItem cnt={item.cnt} flag={item.flag} index={blockIndex} name={item.region_name} />
      </>
    );
  } else if (isType6(item)) {
    return (
      <>
        <View>
          {item.country !== ranking[idx - 1]?.country ? (
            <View style={ItemStyles.headerContainer}>
              <Image
                style={ItemStyles.flagSquare}
                source={{ uri: API_HOST + '/img/flags_new/' + item.country_flag }}
              />
              <Text
                style={[
                  ItemStyles.nameAndCnt,
                  { fontSize: getFontSize(14), textAlign: 'center', textTransform: 'uppercase' }
                ]}
              >
                {item.country}
              </Text>
            </View>
          ) : null}
        </View>
        <StatisticItem
          cnt={item.cnt}
          flag={item.region_flag}
          index={blockIndex}
          name={item.region}
        />
      </>
    );
  } else if (isType2(item)) {
    return (
      <>
        <View>
          {item.mega_name !== ranking[idx - 1]?.mega_name ? (
            <Text style={[ItemStyles.nameAndCnt, ItemStyles.headerWrapper]}>
              {item.mega_name as string}
            </Text>
          ) : null}
        </View>
        <StatisticItem
          name={item.dare_name}
          flag={item.dare_flag}
          cnt={item.cnt}
          index={blockIndex}
        />
      </>
    );
  } else if (isType7(item)) {
    return (
      <StatisticItem name={item.country_name} flag={item.flag} cnt={item.cnt} index={blockIndex} />
    );
  } else if (isType8(item)) {
    return (
      <>
        <View>
          {item.mega_name !== ranking[idx - 1]?.mega_name ? (
            <Text style={[ItemStyles.nameAndCnt, ItemStyles.headerWrapper]}>
              {item.mega_name as string}
            </Text>
          ) : null}
          <StatisticItem name={item.country} flag={item.flag} cnt={item.cnt} index={blockIndex} />
        </View>
      </>
    );
  } else if (isType9(item)) {
    return (
      <StatisticItem name={item.nation} flag={item.flag} cnt={item.score} index={blockIndex} />
    );
  } else if (isType10(item)) {
    return (
      <>
        {item.series_name !== ranking[idx - 1]?.series_name ? (
          <View style={ItemStyles.headerSeriesWrapper}>
            <Image
              key={idx}
              style={{ width: 20, height: 20, borderRadius: 10 }}
              source={{ uri: API_HOST + '/static/img/series/' + item.series_icon }}
            />
            <Text style={[ItemStyles.nameAndCnt, { fontSize: getFontSize(14) }]}>
              {item.series_name as string}
            </Text>
          </View>
        ) : null}
        <SeriesItem
          name={item.item_name}
          flags={item.flags as unknown as string}
          cnt={item.cnt}
          index={blockIndex}
        />
      </>
    );
  } else {
    return (
      <TouchableOpacity
        onPress={() =>
          item.user &&
          navigation.navigate(NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: item.user })
        }
      >
        <StatisticItem
          name={item.nation ? item.nation : `${item.first_name} ${item.last_name}`}
          flag={item.flag}
          cnt={item.score ? item.score : item.cnt}
          index={blockIndex}
        />
      </TouchableOpacity>
    );
  }
};
