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 { PageWrapper, 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 MapLocationIcon from '../../../../assets/icons/travels-section/map-location.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';

const TravelsScreen = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  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: MapLocationIcon, 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 }
  ];

  const handlePress = (page: string) => {
    if (!token) {
      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 (
    <PageWrapper>
      <FlatList
        data={buttons}
        renderItem={renderItem}
        keyExtractor={(item, index) => 'key' + index}
        numColumns={2}
        contentContainerStyle={styles.container}
        style={{ flex: 1, paddingTop: 16 }}
        columnWrapperStyle={{ justifyContent: 'space-between' }}
      />
      <WarningModal
        type="unauthorized"
        isVisible={isModalVisible}
        onClose={() => setIsModalVisible(false)}
      />
    </PageWrapper>
  );
};

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.WHITE,
    borderRadius: 16,
    gap: 12
  },
  label: {
    color: Colors.DARK_BLUE,
    fontSize: 13,
    fontWeight: 'bold'
  }
});

export default TravelsScreen;