import React, { useState } 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';
import { NAVIGATION_PAGES } from 'src/types';

const CountryItem = React.memo(
  ({
    item,
    updateSlow,
    openEditModal,
    token,
    setUserData,
    navigation
  }: {
    item: SlowData;
    updateSlow: (
      id: number,
      v: boolean,
      s11: boolean,
      s31: boolean,
      s101: boolean,
      onDone?: () => void
    ) => void;
    openEditModal: (item: SlowData) => void;
    token: string;
    setUserData: (data: any) => void;
    navigation: any;
  }) => {
    const [isUpdating, setIsUpdating] = useState(false);
    const renderDurationIcon = (condition: 0 | 1) =>
      condition && token ? <CheckSvg fill={Colors.DARK_BLUE} /> : <CheckRegularSvg />;

    return (
      <TouchableOpacity
        style={styles.countryItem}
        onPress={() => {
          setUserData({
            type: 'countries',
            id: item.country_id,
            visited: Boolean(item.visited),
            slow11: item.slow11,
            slow31: item.slow31,
            slow101: item.slow101,
            flag: item.flag
          });
          navigation.navigate(NAVIGATION_PAGES.COUNTRY_PREVIEW, {
            regionId: item.country_id,
            type: 'country',
            disabled: token ? false : true,
            isTravelsScreen: true
          });
        }}
      >
        <View style={styles.headerContainer}>
          <Image source={{ uri: API_HOST + item.flag }} style={styles.flag} />
          <View style={{ flex: 1, gap: 4 }}>
            <Text style={styles.countryName}>{item.country}</Text>
            <View style={styles.infoContainer}>
              <Text style={styles.infoText} numberOfLines={2}>
                {item.info_text}
              </Text>
              {item.visited === 0 && (
                <TouchableOpacity
                  onPress={() =>
                    navigation.navigate(NAVIGATION_PAGES.EDIT_COUNTRY_DATA, {
                      countryId: item.country_id,
                      countryName: item.country,
                      countryFlag: item.flag,
                      slow11: item.slow11,
                      slow31: item.slow31,
                      slow101: item.slow101,
                      isSlowList: true
                    })
                  }
                  style={styles.editRegionBtn}
                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                >
                  <EditSvg width={14} height={14} />
                </TouchableOpacity>
              )}
            </View>
          </View>
        </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 && item.visited_regions <= 1 ? (
                <TouchableOpacity
                  onPress={() =>
                    navigation.navigate(NAVIGATION_PAGES.EDIT_COUNTRY_DATA, {
                      countryId: item.country_id,
                      countryName: item.country,
                      countryFlag: item.flag,
                      slow11: item.slow11,
                      slow31: item.slow31,
                      slow101: item.slow101,
                      isSlowList: true
                    })
                  }
                  style={styles.editScoreBtn}
                >
                  <EditSvg width={14} height={14} />
                </TouchableOpacity>
              ) : null}

              <TouchableOpacity
                style={[
                  item.visited ? styles.visitedButton : styles.markVisitedButton,
                  isUpdating && { opacity: 0.7 }
                ]}
                disabled={isUpdating}
                onPress={async () => {
                  if (item.visited && item.visited_regions > 1) {
                    navigation.navigate(NAVIGATION_PAGES.EDIT_COUNTRY_DATA, {
                      countryId: item.country_id,
                      countryName: item.country,
                      countryFlag: item.flag,
                      slow11: item.slow11,
                      slow31: item.slow31,
                      slow101: item.slow101,
                      isSlowList: true
                    });
                  } else {
                    setIsUpdating(true);
                    await updateSlow(
                      item.country_id,
                      item.visited === 1 ? false : true,
                      Boolean(item.slow11),
                      Boolean(item.slow31),
                      Boolean(item.slow101),
                      () => setIsUpdating(false)
                    );
                  }
                }}
              >
                {item.visited && item.visited_regions <= 1 ? (
                  <View style={styles.visitedContainer}>
                    <MarkIcon width={16} height={16} />
                    <Text style={styles.visitedButtonText}>Visited</Text>
                  </View>
                ) : item.visited ? (
                  <View style={styles.visitedContainer}>
                    <EditSvg width={14} height={14} />
                    <Text style={styles.visitedButtonText}>Edit</Text>
                  </View>
                ) : (
                  <Text style={[styles.markVisitedButtonText]}>Mark visited</Text>
                )}
              </TouchableOpacity>
            </View>
          )}
        </View>
      </TouchableOpacity>
    );
  }
);

export default CountryItem;
