import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';

import { TripsData } from '../../utils/types';
import { API_HOST } from 'src/constants';
import { Colors } from 'src/theme';
import { NAVIGATION_PAGES } from 'src/types';
import { styles } from './styles';

import CalendarIcon from 'assets/icons/travels-screens/calendar.svg';
import EditIcon from 'assets/icons/travels-screens/pen-to-square.svg';

const TripItem = ({ item }: { item: TripsData }) => {
  const navigation = useNavigation();

  const formatDate = (dateString: string) => {
    const date = moment(dateString);
    const formattedDate = date.format('MMM DD');
    const year = date.format('YYYY');

    return (
      <Text style={styles.alignCenter}>
        <Text style={styles.tripDateText}>{formattedDate}</Text>
        {'\n'}
        <Text style={styles.tripDateText}>{year}</Text>
      </Text>
    );
  };
  return (
    <View style={styles.tripItemContainer}>
      <View style={styles.tripHeaderContainer}>
        <View style={styles.tripDateContainer}>
          <CalendarIcon fill={Colors.DARK_BLUE} />
          <Text style={[styles.tripDateText, { marginLeft: 8 }]}>{formatDate(item.date_from)}</Text>
          <Text style={styles.tripDateText}>-</Text>
          <Text style={styles.tripDateText}>{formatDate(item.date_to)}</Text>
        </View>
        <TouchableOpacity
          style={styles.editButton}
          onPress={() =>
            navigation.navigate(...([NAVIGATION_PAGES.ADD_TRIP, { editTripId: item.id }] as never))
          }
        >
          <EditIcon />
          <Text style={styles.editButtonText}>Edit</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.divider} />

      {item.description && (
        <>
          <Text style={styles.descriptionTitle}>Description</Text>
          <Text style={styles.descriptionText}>{item.description}</Text>
        </>
      )}

      <Text style={styles.visitedRegionsTitle}>Visited regions</Text>
      <ScrollView
        style={styles.regionsScrollView}
        showsVerticalScrollIndicator={false}
        horizontal={false}
        nestedScrollEnabled={true}
      >
        {item.regions.map((region) => {
          const [name, ...rest] = region.region_name?.split(/ – | - /);
          const subname = rest?.join(' - ');

          return (
            <View key={region.id} style={styles.regionItem}>
              <Image source={{ uri: API_HOST + region.flag1 }} style={styles.flagIcon} />
              {region.flag2 && (
                <Image
                  source={{ uri: API_HOST + region.flag2 }}
                  style={[styles.flagIcon, { marginLeft: -5 }]}
                />
              )}
              <View style={styles.nameContainer}>
                <Text style={styles.regionName}>{name}</Text>
                <Text style={styles.regionSubname}>{subname}</Text>
              </View>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
};

export default TripItem;