import { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View, Image, Animated } from 'react-native';
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';

import { styles } from './style';
import React from 'react';
import { Colors } from 'src/theme';

interface Region {
  id: number;
  name: string;
  region_photos: string;
  visitors_count: number;
}

interface RegionPopupProps {
  region: Region;
  userAvatars: string[];
  userData: any;
  openEditModal: () => void;
  updateNM: (region: number, first: number, last: number, visits: number, quality: number) => void;
  updateDare: (region: number, visits: 0 | 1) => void;
  disabled?: boolean;
}

const RegionPopup: React.FC<RegionPopupProps> = ({
  region,
  userAvatars,
  userData,
  openEditModal,
  updateNM,
  updateDare,
  disabled
}) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true
    }).start();
  }, [fadeAnim]);

  const splitRegionName = (fullName: string) => {
    const parts = fullName.split(/ – | - /);
    return {
      regionTitle: parts[0],
      regionSubtitle: parts.length > 1 ? parts[1] : ''
    };
  };

  const { regionTitle, regionSubtitle } = splitRegionName(region.name);
  const regionImg = JSON.parse(region.region_photos)[0];

  function formatNumber(number: number) {
    if (number >= 1000) {
      return (number / 1000).toFixed(1) + 'k';
    }
    return number.toString();
  }

  const formattedCount = formatNumber(region.visitors_count);

  return (
    <Animated.View style={[styles.popupContainer, { opacity: fadeAnim }]}>
      <View style={styles.regionInfoContainer}>
        {regionImg && <Image source={{ uri: regionImg }} style={styles.regionImage} />}
        <View style={styles.regionTextContainer}>
          <Text style={styles.regionTitle}>{regionTitle}</Text>
          <Text style={styles.regionSubtitle}>{regionSubtitle}</Text>
        </View>
      </View>

      <View style={styles.separator} />

      <View style={styles.bottomContainer}>
        <View style={styles.userContainer}>
          {userData?.visited && userData?.first_visit_year > 1 && !disabled && (
            <View style={styles.infoContent}>
              <CalendarSvg height={18} width={18} fill={Colors.DARK_BLUE} />
              <Text style={styles.visitedButtonText}>{userData?.first_visit_year}</Text>
            </View>
          )}

          {userData?.visited && userData?.type === 'nm' && !disabled && (
            <View style={styles.infoContent}>
              <RotateSvg fill={Colors.DARK_BLUE} />
              <Text style={styles.visitedButtonText}>
                {userData.visits >= 10 ? '10+' : userData.no_of_visits}
              </Text>
            </View>
          )}
          {(!userData?.visited || userData?.type === 'dare' || disabled) && (
            <View style={styles.userImageContainer}>
              {userAvatars?.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>
        <View style={styles.btnContainer}>
          {userData?.visited && userData?.type === 'nm' && !disabled ? (
            <TouchableOpacity onPress={openEditModal} style={styles.editBtn}>
              <EditSvg width={14} height={14} />
            </TouchableOpacity>
          ) : null}
          <TouchableOpacity
            style={[
              styles.btn,
              userData?.visited && !disabled ? styles.visitedButton : styles.markVisitedButton
            ]}
            onPress={() =>
              userData?.type === 'nm'
                ? updateNM(
                    region.id,
                    userData.visited ? 0 : 1,
                    userData.visited ? 0 : 1,
                    userData.visited ? 0 : 1,
                    3
                  )
                : updateDare(region.id, userData.visited ? 0 : 1)
            }
          >
            {userData?.visited && !disabled ? (
              <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>
    </Animated.View>
  );
};

export default React.memo(RegionPopup);
