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,
    hideCountry = false
  }: {
    item: NmRegion;
    openEditModal: (item: NmRegion) => void;
    updateNM: (
      region: number,
      first: number,
      last: number,
      visits: number,
      quality: number
    ) => void;
    token: string;
    hideCountry?: boolean;
  }) => {
    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 = 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 }}>
            {!hideCountry && <Text style={styles.regionItemName}>{name}</Text>}
            <Text
              style={[styles.regionItemSubname, hideCountry && { fontSize: 14, fontWeight: '600' }]}
            >
              {subname}
            </Text>
          </View>
          {!hideCountry && (
            <View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
              <Image source={{ uri: `${API_HOST}${item.flag_1}` }} style={styles.flag} />
              {item.flag_2 && (
                <Image
                  source={{ uri: `${API_HOST}${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 === 1 && !item.future ? (
                <TouchableOpacity onPress={() => openEditModal(item)} style={styles.editBtn}>
                  <EditSvg width={14} height={14} />
                </TouchableOpacity>
              ) : null} */}
              {item.future ? (
                <View style={{ flex: 1 }}>
                  <Text
                    style={[
                      styles.regionItemSubname,
                      {
                        fontSize: 10,
                        fontStyle: 'italic'
                      }
                    ]}
                  >
                    Visits planned in the future
                  </Text>
                </View>
              ) : null}
              <TouchableOpacity
                style={[
                  styles.btn,
                  item.visits > 0 || item.edit_in_trips === 1
                    ? styles.visitedButton
                    : styles.markVisitedButton
                ]}
                onPress={() => {
                  if (item.edit_in_trips === 1) {
                    openEditModal(item);
                    return;
                  }
                  updateNM(
                    item.id,
                    item.visits > 0 ? 0 : 1,
                    item.visits > 0 ? 0 : 1,
                    item.visits > 0 ? 0 : 1,
                    3
                  );
                }}
              >
                {item.edit_in_trips === 1 ? (
                  <View style={styles.visitedContainer}>
                    <EditSvg width={14} height={14} />
                    <Text style={styles.visitedButtonText}>Edit</Text>
                  </View>
                ) : 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>
    );
  }
);
