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

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

import CheckSvg from 'assets/icons/travels-screens/circle-check.svg';
import CheckRegularSvg from 'assets/icons/travels-screens/circle-check-regular.svg';
import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
import MarkIcon from 'assets/icons/mark.svg';

const CountryItem = React.memo(
  ({
    item,
    updateSlow,
    openEditModal,
    token
  }: {
    item: SlowData;
    updateSlow: (id: number, v: boolean, s11: boolean, s31: boolean, s101: boolean) => void;
    openEditModal: (item: SlowData) => void;
    token: string;
  }) => {
    const renderDurationIcon = (condition: 0 | 1) =>
      condition && token ? <CheckSvg fill={Colors.DARK_BLUE} /> : <CheckRegularSvg />;

    return (
      <View style={styles.countryItem}>
        <View style={styles.headerContainer}>
          <Image source={{ uri: API_HOST + item.flag }} style={styles.flag} />
          <Text style={styles.countryName}>{item.country}</Text>
        </View>
        <View style={styles.divider}></View>

        <View
          style={[
            styles.countryDetails,
            !token ? { alignItems: 'flex-start', flexDirection: 'column' } : {}
          ]}
        >
          <View style={styles.durationContainer}>
            <View style={styles.durationItem}>
              {renderDurationIcon(item.slow11)}
              <Text style={styles.visitDuration}>11+ days</Text>
            </View>
            <View style={styles.durationItem}>
              {renderDurationIcon(item.slow31)}
              <Text style={styles.visitDuration}>31+ days</Text>
            </View>
            <View style={styles.durationItem}>
              {renderDurationIcon(item.slow101)}
              <Text style={styles.visitDuration}>101+ days</Text>
            </View>
          </View>

          {token && (
            <View style={styles.btnContainer}>
              {item.visited ? (
                <TouchableOpacity onPress={() => openEditModal(item)} style={styles.editScoreBtn}>
                  <EditSvg width={14} height={14} />
                </TouchableOpacity>
              ) : null}

              <TouchableOpacity
                style={item.visited ? styles.visitedButton : styles.markVisitedButton}
                onPress={() =>
                  updateSlow(
                    item.country_id,
                    item.visited === 1 ? false : true,
                    Boolean(item.slow11),
                    Boolean(item.slow31),
                    Boolean(item.slow101)
                  )
                }
              >
                {item.visited ? (
                  <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>
    );
  }
);

export default CountryItem;
