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

import { qualityOptions } from '../../utils/constants';
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 ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
import CheckSvg from 'assets/icons/travels-screens/check.svg';
import SquareSvg from 'assets/icons/travels-screens/square.svg';

const RegionItem = ({
  region,
  onDelete,
  onToggleStatus,
  onQualityChange,
  onHiddenChange,
  startDate
}: {
  region: RegionAddData;
  onDelete: () => void;
  onToggleStatus: () => void;
  onQualityChange: () => void;
  onHiddenChange: () => void;
  startDate: string | null;
}) => {
  const name = region.region_name.split(/ – | - /);
  const qualityName = region.quality
    ? qualityOptions.find((q) => q.id === region.quality)?.name
    : 'Good Visit';
  const disabled = !startDate || startDate > new Date().toISOString().split('T')[0];

  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[0]}</Text>
            <Text style={styles.regionSubname}>{name[1]}</Text>
          </View>
        </View>
        <TouchableOpacity style={styles.trashBtn} onPress={onDelete}>
          <TrashSvg fill={Colors.WHITE} />
        </TouchableOpacity>
      </View>

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

      <Text style={styles.qualityOfVisit}>Quality of visit</Text>
      <View style={styles.regionItemBottom}>
        <TouchableOpacity style={styles.qualitySelector} onPress={onQualityChange}>
          <Text style={styles.qualityButtonText}>{qualityName}</Text>
          <ChevronIcon width={18} height={18} />
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.markCompletedButton,
            disabled && {
              backgroundColor: Colors.LIGHT_GRAY,
              borderColor: Colors.LIGHT_GRAY
            }
          ]}
          onPress={onToggleStatus}
          disabled={disabled}
        >
          <View style={styles.completedContainer}>
            <View style={{ position: 'relative' }}>
              <SquareSvg />
            </View>
            {region.status === 1 && !disabled && (
              <View style={{ position: 'absolute', left: 2, top: 1 }}>
                <CheckSvg width={14} height={14} />
              </View>
            )}
            <Text style={styles.markCompletedButtonText}>Completed</Text>
          </View>
        </TouchableOpacity>
      </View>
      {region.can_be_hidden && (
        <View style={{ marginTop: 12, marginHorizontal: '25%' }}>
          <TouchableOpacity
            style={[
              styles.markCompletedButton,
              disabled && {
                backgroundColor: Colors.LIGHT_GRAY,
                borderColor: Colors.LIGHT_GRAY
              }
            ]}
            onPress={onHiddenChange}
            disabled={disabled}
          >
            <View style={styles.completedContainer}>
              <View style={{ position: 'relative' }}>
                <SquareSvg />
              </View>
              {region.hidden && (
                <View style={{ position: 'absolute', left: 2, top: 1 }}>
                  <CheckSvg width={14} height={14} />
                </View>
              )}

              <Text style={styles.markCompletedButtonText}>Hidden</Text>
            </View>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};

export default RegionItem;