import React from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';

import { DareRegion, TCCRegion } from '../../utils/types';
import { styles } from './styles';
import { API_HOST } from 'src/constants';
import useRegionData from '../../utils/useRegionData';
import formatNumber from '../../utils/formatNumber';

import MarkIcon from 'assets/icons/mark.svg';

export const RegionItem = React.memo(
  ({
    item,
    updateRegion,
    dare = false,
    token,
    isTCCRegion = false
  }: {
    item: TCCRegion | DareRegion;
    updateRegion: (region: number, visits: 0 | 1) => void;
    dare?: boolean;
    token: string;
    isTCCRegion?: boolean;
  }) => {
    const [name, ...rest] = item.name?.split(/ – | - /);
    const subname = rest?.join(' - ');
    const { regionData, avatars } = useRegionData(item.id, dare, !isTCCRegion);

    const regionImg = !isTCCRegion && regionData ? JSON.parse(regionData?.region_photos)[0] : '';
    const formattedCount = formatNumber(regionData?.visitors_count ?? 0);

    return (
      <View style={styles.regionItem}>
        <View style={styles.regionItemHeader}>
          {!isTCCRegion && regionImg && (
            <Image source={{ uri: regionImg, cache: 'force-cache' }} style={styles.regionImage} />
          )}
          <View style={{ gap: 6, flex: 1 }}>
            <Text style={styles.regionItemName}>{name}</Text>
            <Text style={styles.regionItemSubname}>{subname}</Text>
          </View>
          <View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
            <Image source={{ uri: `${API_HOST}${item.flag1}` }} style={styles.flag} />
            {item.flag2 && (
              <Image
                source={{ uri: `${API_HOST}${item.flag2}` }}
                style={[styles.flag, { marginLeft: -5 }]}
              />
            )}
          </View>
        </View>

        <View style={styles.divider} />

        <View style={styles.regionItemContent}>
          {!isTCCRegion && avatars && (
            <View style={styles.userContainer}>
              <View style={styles.userImageContainer}>
                {avatars &&
                  avatars?.map((avatar, index) => (
                    <Image key={index} source={{ uri: avatar }} style={styles.userImage} />
                  ))}
                <View style={styles.userCountContainer}>
                  <Text style={styles.userCount}>{formattedCount}</Text>
                </View>
              </View>
            </View>
          )}
          {token && (
            <View style={styles.btnContainer}>
              <TouchableOpacity
                style={[
                  styles.btn,
                  +item.visited > 0 ? styles.visitedButton : styles.markVisitedButton
                ]}
                onPress={() => updateRegion(item.id, +item.visited > 0 ? 0 : 1)}
              >
                {+item.visited > 0 ? (
                  <View style={styles.visitedContainer}>
                    <MarkIcon width={16} height={16} />
                    <Text style={styles.visitedButtonText}>Visited</Text>
                  </View>
                ) : (
                  <Text style={[styles.markVisitedButtonText]}>Mark visited</Text>
                )}
              </TouchableOpacity>
            </View>
          )}
        </View>
      </View>
    );
  }
);
