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

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

import TrashSvg from 'assets/icons/travels-screens/trash-solid.svg';
import CalendarSvg from 'assets/icons/calendar.svg';
import TransitSvg from 'assets/icons/transit.svg';
import Tooltip from 'react-native-walkthrough-tooltip';

interface RegionItemProps {
  region: RegionAddData;
  onDelete: () => void;
  onSelectDates: () => void;
  datesLabel?: string;
  onMoveUp: () => void;
  onMoveDown: () => void;
  index: number;
  total: number;
  errorMessage?: string;
  startLabel: string;
  endLabel: string;
}

const RegionItem = ({
  region,
  onDelete,
  onSelectDates,
  datesLabel,
  onMoveUp,
  onMoveDown,
  index,
  total,
  errorMessage,
  startLabel,
  endLabel
}: RegionItemProps) => {
  const [name, ...rest] = region.region_name?.split(/ – | - /);
  const subname = rest?.join(' - ');
  const [datesTooLong, setDatesTooLong] = useState(false);
  const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);

  return (
    <View key={region.id} style={styles.regionItem}>
      <View style={styles.regionItemTop}>
        <View style={styles.regionHeader}>
          <Image
            source={{ uri: `${API_HOST}/img/flags_new/${region.flag1}` }}
            style={styles.flagStyle}
          />
          {region.flag2 && (
            <Image
              source={{ uri: `${API_HOST}/img/flags_new/${region.flag2}` }}
              style={[styles.flagStyle, { marginLeft: -17 }]}
            />
          )}
          <View style={styles.nameContainer}>
            <Text style={styles.regionName}>{name}</Text>
            <Text style={styles.regionSubname}>{subname}</Text>
          </View>
        </View>
        <TouchableOpacity style={styles.trashBtn} onPress={onDelete}>
          <TrashSvg fill={Colors.WHITE} />
        </TouchableOpacity>
      </View>

      <View style={styles.divider}></View>

      <View style={styles.dateRow}>
        <View style={{ flex: 1 }}>
          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 10 }}>
            <TouchableOpacity style={[styles.regionSelector, { flex: 1 }]} onPress={onSelectDates}>
              <CalendarSvg
                fill={
                  !region?.visitStartDate?.year || !region?.visitEndDate?.year
                    ? Colors.TEXT_GRAY
                    : Colors.DARK_BLUE
                }
                height={15}
                width={15}
              />
              <Text
                style={[
                  styles.dateText,
                  (!region?.visitStartDate?.year || !region?.visitEndDate?.year) &&
                  styles.placeholderText
                ]}
                numberOfLines={2}
                onTextLayout={(e) => {
                  if (e.nativeEvent.lines.length > 1) {
                    setDatesTooLong(true);
                  } else {
                    setDatesTooLong(false);
                  }
                }}
              >
                {datesTooLong &&
                  region?.visitStartDate?.year &&
                  region?.visitEndDate?.year &&
                  startLabel !== endLabel
                  ? `${startLabel}\n${endLabel}`
                  : (datesLabel ?? 'Select visit dates')}
              </Text>
            </TouchableOpacity>
            {region.quality === 1 ? (
              <Tooltip
                isVisible={toolTipVisible}
                content={
                  <Text
                    style={{
                      fontSize: 12,
                      color: Colors.DARK_BLUE,
                      fontStyle: 'italic',
                      fontWeight: '600'
                    }}
                  >
                    Transit
                  </Text>
                }
                contentStyle={{ backgroundColor: Colors.WHITE }}
                placement="top"
                onClose={() => setToolTipVisible(false)}
                backgroundColor="transparent"
                allowChildInteraction={false}
              >
                <TouchableOpacity
                  onPress={() => setToolTipVisible(true)}
                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                >
                  <TransitSvg fill={Colors.DARK_BLUE} width={24} height={24} />
                </TouchableOpacity>
              </Tooltip>
            ) : null}
          </View>

          {errorMessage ? (
            <Text style={{ color: Colors.RED, marginTop: 4, marginLeft: 4, fontSize: 12 }}>
              {errorMessage}
            </Text>
          ) : null}
        </View>
      </View>
    </View>
  );
};

export default RegionItem;
