import { FC } from 'react';
import { ImageBackground, View, Text, ScrollView } from 'react-native';
import type { NavigationProp } from '@react-navigation/native';

import { Header, PageWrapper } from '../../../components';
import { styles } from './styles';
import { Colors } from 'src/theme';
import UserGroupIcon from '../../../../assets/icons/user-group.svg';
import CrownIcon from '../../../../assets/icons/crown.svg';
import IDCardIcon from '../../../../assets/icons/id-card.svg';
import StreetPeopleIcon from '../../../../assets/icons/street-view.svg';
import ChartPieIcon from '../../../../assets/icons/chart-pie.svg';
import MemoriamIcon from '../../../../assets/icons/monument.svg';
import TrophyIcon from '../../../../assets/icons/trophy.svg';
import FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
import CompassIcon from '../../../../assets/icons/travels-section/compass.svg';
import SeriesIcon from '../../../../assets/icons/travels-section/series.svg';
import EarthIcon from '../../../../assets/icons/travels-section/earth.svg';
import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';

type Props = {
  navigation: NavigationProp<any>;
};

export const PlanInfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={'Plan & track your travels'} />
      <ImageBackground
        style={styles.background}
        source={require('../../../../assets/images/nm-background.png')}
      >
        <ScrollView
          style={styles.wrapper}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainerStyle}
        >
          
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <FlagsIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Countries</Text>
          </View>
          <Text style={styles.text}>Mark the countries you've been to as visited. You can also indicate how long you stayed in each country. This will influence you UN score and your SLOW score.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <RegionsIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Regions</Text>
          </View>
          <Text style={styles.text}>Explore the list of NomadMania regions. You can indicate your first and last year of visit, the quality of your visit and how many times you've been to a region. This will influence your NM score as well as UN and UN+ scores.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <CompassIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>DARE</Text>
          </View>
          <Text style={styles.text}>Distinctive Alternative Remote Extremes is a novel list that can bring some new interest in the travel community and encourage travellers to go further. This will influence your DARE score.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <SeriesIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Series</Text>
          </View>
          <Text style={styles.text}>Explore 70+ series with various points of interest. Our must see items are in the Top of the tops series.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <EarthIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Earth</Text>
          </View>
          <Text style={styles.text}>A purely geographical measure of travel, Know Your Earth divides the world into 458 'pieces' based on 10 degree divisions of latitude and longitude.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <TripIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Trips</Text>
          </View>
          <Text style={styles.text}>Create your detailed travel log. Add info about your trips, with each trip having a start and end date, list of visited regions and your comment.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <ImagesIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Photos</Text>
          </View>
          <Text style={styles.text}>This is a place where you can upload your photos. Each photo can be assigned to a region or a DARE place.</Text>
          

        </ScrollView>
      </ImageBackground>
    </PageWrapper>
  );
};
