import React from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import { Colors } from '../../theme';
import { styles } from './styles';

import MarkSVG from '../../../assets/icons/mark.svg';
import { API_HOST } from '../../constants';

export const Item = ({
  item,
  onPress,
  backgroundColor,
  selected,
  initial,
  date,
  countries,
  isRegionFromTrips
}: ItemProps) => {
  const name = initial && date ? item : initial ? item.country : item.name?.split('–') || '';

  const [regionName, ...rest] =
    isRegionFromTrips && typeof item.name === 'string' ? item.name.split(/ – | - /) : ['', ''];
  const subName = rest.length > 0 ? rest.join(' - ') : '';

  return (
    <TouchableOpacity onPress={onPress} style={[styles.item, { backgroundColor }]}>
      {item?.country === 'All Regions' && <View style={{ width: 20 }}></View>}
      <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }}>
        {item.flag && !isRegionFromTrips ? (
          <Image
            width={48}
            height={48}
            style={{ borderRadius: 48 / 2, borderWidth: 1, borderColor: Colors.LIGHT_GRAY }}
            source={{
              uri: initial ? `${API_HOST}${item.flag}` : `${API_HOST}/img/flags_new/${item.flag}`
            }}
          />
        ) : null}
        {isRegionFromTrips ? (
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Image
              width={48}
              height={48}
              style={{ borderRadius: 48 / 2, borderWidth: 1, borderColor: Colors.LIGHT_GRAY }}
              source={{
                uri: `${API_HOST}${item.flag1}`
              }}
            />
            {item.flag2 ? (
              <Image
                width={48}
                height={48}
                style={{
                  borderRadius: 48 / 2,
                  borderWidth: 1,
                  borderColor: Colors.LIGHT_GRAY,
                  marginLeft: -15
                }}
                source={{
                  uri: `${API_HOST}${item.flag2}`
                }}
              />
            ) : null}
          </View>
        ) : null}
        {isRegionFromTrips ? (
          <View style={{ flexShrink: 1 }}>
            <View style={{ flexDirection: 'row' }}>
              <Text style={[styles.title, { color: Colors.DARK_BLUE, flexShrink: 1 }]}>
                {regionName}
              </Text>
            </View>
            {subName && <Text style={[styles.text, { color: Colors.DARK_BLUE }]}>{subName}</Text>}
          </View>
        ) : (
          <View style={{ flexShrink: 1 }}>
            <View style={{ flexDirection: 'row' }}>
              <Text style={[styles.title, { color: Colors.DARK_BLUE, flexShrink: 1 }]}>
                {initial ? (name as string) : (name as string[])[0]}
              </Text>
              {initial && !date && item.country !== 'All Regions' && !countries && (
                <View style={styles.regionIndicator}>
                  <Text style={[styles.text, { color: Colors.WHITE, fontWeight: 'bold' }]}>
                    {item.dare ? 'DARE' : 'NM'}
                  </Text>
                </View>
              )}
            </View>
            {item.name && (
              <Text style={[styles.text, { color: Colors.DARK_BLUE }]}>
                {initial ? item.name : (name as string[])[1]}
              </Text>
            )}
          </View>
        )}
      </View>
      <View style={{ marginRight: 10, width: 20 }}>{selected && <MarkSVG />}</View>
    </TouchableOpacity>
  );
};

export type ItemData = {
  id: number;
  name?: string;
  flag?: string;
  country?: string;
  dare?: boolean;
  flag1?: string;
  flag2?: string | null;
};

export type RegionsData = {
  id: number;
  name: string;
  flag1: string;
  flag2: string | null;
};

type ItemProps = {
  item: ItemData;
  onPress: () => void;
  backgroundColor: string;
  selected: boolean;
  initial?: boolean;
  date?: boolean;
  countries?: boolean;
  isRegionFromTrips?: boolean;
};
