import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { useNavigation } from '@react-navigation/native';

import { Colors } from '../../../theme';
import { WarningModal } from '../../../components';
import { NAVIGATION_PAGES } from 'src/types';
import { storage, StoreType } from '../../../storage';

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';
import FixersIcon from '../../../../assets/icons/travels-section/fixers.svg';
import CalendarIcon from 'assets/icons/events/calendar-solid.svg';
import InfoIcon from 'assets/icons/info-solid.svg';
import { getFontSize } from 'src/utils';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const TravelsScreen = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const insets = useSafeAreaInsets();
  const token = storage.get('token', StoreType.STRING);
  const navigation = useNavigation();

  const buttons = [
    { label: 'Countries', icon: FlagsIcon, page: NAVIGATION_PAGES.COUNTRIES },
    { label: 'Regions', icon: RegionsIcon, page: NAVIGATION_PAGES.REGIONS },
    { label: 'DARE', icon: CompassIcon, page: NAVIGATION_PAGES.DARE },
    { label: 'Series', icon: SeriesIcon, page: NAVIGATION_PAGES.SERIES },
    { label: 'Earth', icon: EarthIcon, page: NAVIGATION_PAGES.EARTH },
    { label: 'Trips', icon: TripIcon, page: NAVIGATION_PAGES.TRIPS },
    { label: 'Photos', icon: ImagesIcon, page: NAVIGATION_PAGES.PHOTOS },
    { label: 'Fixers', icon: FixersIcon, page: NAVIGATION_PAGES.FIXERS },
    { label: 'Events', icon: CalendarIcon, page: NAVIGATION_PAGES.EVENTS }
  ];

  const handlePress = (page: string) => {
    if (
      !token &&
      (page === NAVIGATION_PAGES.TRIPS ||
        page === NAVIGATION_PAGES.PHOTOS ||
        page === NAVIGATION_PAGES.FIXERS)
    ) {
      setIsModalVisible(true);
    } else {
      navigation.navigate(page as never);
    }
  };

  const renderItem = ({ item }: { item: { label: string; icon: any; page: string } }) => (
    <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePress(item.page)}>
      <View style={styles.button}>
        <item.icon
          fill={Colors.ORANGE}
          width={Dimensions.get('window').width < 380 ? 105 : 110}
          height={32}
        />
        <Text style={styles.label}>{item.label}</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={{ paddingTop: insets.top, marginLeft: '5%', marginRight: '5%', height: '100%' }}>
      <View style={styles.header}>
        <View style={{ width: 30 }} />
        <Text style={styles.title}>Travels</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate(NAVIGATION_PAGES.PLAN_INFO as never)}
          style={{ width: 30 }}
        >
          <InfoIcon />
        </TouchableOpacity>
      </View>
      <FlatList
        data={buttons}
        renderItem={renderItem}
        keyExtractor={(item, index) => 'key' + index}
        numColumns={2}
        contentContainerStyle={styles.container}
        style={{ flex: 1 }}
        columnWrapperStyle={{ justifyContent: 'space-between' }}
      />
      <WarningModal
        type="unauthorized"
        isVisible={isModalVisible}
        onClose={() => setIsModalVisible(false)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
    paddingHorizontal: Dimensions.get('window').width < 380 ? '5%' : 24,
    paddingVertical: 8,
    gap: 32,
    width: '100%'
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    paddingHorizontal: 8,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 16,
    gap: 12
  },
  label: {
    color: Colors.DARK_BLUE,
    fontSize: 13,
    fontWeight: 'bold'
  },
  title: { color: Colors.DARK_BLUE, fontFamily: 'redhat-700', fontSize: getFontSize(14) },
  header: {
    alignItems: 'center',
    paddingVertical: 16,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

export default TravelsScreen;