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

import { NmRegion } from '../../utils/types';
import { Colors } from 'src/theme';
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';
import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
import RotateSvg from 'assets/icons/travels-screens/rotate.svg';

export const NmRegionItem = React.memo(
  ({
    item,
    openEditModal,
    updateNM,
    token
  }: {
    item: NmRegion;
    openEditModal: (item: NmRegion) => void;
    updateNM: (
      region: number,
      first: number,
      last: number,
      visits: number,
      quality: number
    ) => void;
    token: string;
  }) => {
    const [name, ...rest] = item.region_name?.split(/ – | - /);
    const subname = rest?.join(' - ');
    const { regionData, avatars } = useRegionData(item.id);

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

    return (
      <View style={styles.regionItem}>
        <View style={styles.regionItemHeader}>
          {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}/img/flags_new/${item.flag_1}` }}
              style={styles.flag}
            />
            {item.flag_2 && (
              <Image
                source={{ uri: `${API_HOST}/img/flags_new/${item.flag_2}` }}
                style={[styles.flag, { marginLeft: -5 }]}
              />
            )}
          </View>
        </View>

        <View style={styles.divider} />

        <View style={styles.regionItemContent}>
          {item.visits > 0 && item.year > 1 && token && (
            <View style={styles.infoContent}>
              <CalendarSvg height={18} width={18} fill={Colors.DARK_BLUE} />
              <Text style={styles.visitedButtonText}>{item.year}</Text>
            </View>
          )}

          {item.visits > 0 && token && (
            <View style={styles.infoContent}>
              <RotateSvg fill={Colors.DARK_BLUE} />
              <Text style={styles.visitedButtonText}>
                {item.visits >= 10 ? '10+' : item.visits}
              </Text>
            </View>
          )}

          {(item.visits <= 0 || !token) && 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}>
              {item.visits > 0 ? (
                <TouchableOpacity onPress={() => openEditModal(item)} style={styles.editBtn}>
                  <EditSvg width={14} height={14} />
                </TouchableOpacity>
              ) : null}
              <TouchableOpacity
                style={[
                  styles.btn,
                  item.visits > 0 ? styles.visitedButton : styles.markVisitedButton
                ]}
                onPress={() =>
                  updateNM(
                    item.id,
                    item.visits > 0 ? 0 : 1,
                    item.visits > 0 ? 0 : 1,
                    item.visits > 0 ? 0 : 1,
                    3
                  )
                }
              >
                {item.visits > 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>
    );
  }
);