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

import { Colors } from '../../../theme';
import { PageWrapper } from '../../../components';
import { NAVIGATION_PAGES } from 'src/types';

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 ScrollIcon from '../../../../assets/icons/scroll.svg';
import TrophyIcon from '../../../../assets/icons/trophy.svg';

const TravellersScreen = () => {
  const navigation = useNavigation();

  const buttons = [
    { label: 'Master Ranking', icon: UserGroupIcon, page: NAVIGATION_PAGES.MASTER_RANKING },
    { label: 'UN Masters', icon: CrownIcon, page: NAVIGATION_PAGES.UN_MASTERS },
    { label: 'LPI Ranking', icon: IDCardIcon, page: NAVIGATION_PAGES.LPI_RANKING },
    { label: 'Series Ranking', icon: StreetPeopleIcon, page: NAVIGATION_PAGES.SERIES_RANKING },
    { label: 'Statistics', icon: ChartPieIcon, page: NAVIGATION_PAGES.STATISTICS },
    { label: 'In Memoriam', icon: MemoriamIcon, page: NAVIGATION_PAGES.IN_MEMORIAM },
    { label: 'In History', icon: ScrollIcon, page: NAVIGATION_PAGES.IN_HISTORY },
    { label: 'Triumphs', icon: TrophyIcon, page: NAVIGATION_PAGES.TRIUMPHS }
  ];

  const renderItem = ({ item }: { item: { label: string; icon: any; page: string } }) => (
    <TouchableOpacity
      style={{ alignItems: 'center' }}
      onPress={() => navigation.navigate(item.page as never)}
    >
      <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>
      <View style={{ alignItems: 'center', paddingVertical: 16 }}>
        <Text style={styles.title}>Travellers</Text>
      </View>

      <FlatList
        data={buttons}
        renderItem={renderItem}
        keyExtractor={(item, index) => 'key' + index}
        numColumns={2}
        contentContainerStyle={styles.container}
        style={{ flex: 1 }}
        columnWrapperStyle={{ justifyContent: 'space-between' }}
      />
    </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.FILL_LIGHT,
    borderRadius: 16,
    gap: 12
  },
  label: {
    color: Colors.DARK_BLUE,
    fontSize: 13,
    fontWeight: 'bold'
  },
  title: { color: Colors.DARK_BLUE, fontSize: 14, fontWeight: '600' }
});

export interface Ranking {
  user_id: number;
  score_dare: number;
  score_nm: number;
  score_un: number;
  score_unp: number;
  score_tcc: number;
  score_deep: number;
  score_whs: number;
  score_kye: number;
  score_tbt: number;
  score_yes: number;
  score_slow: number;
  rank_tbt: number;
  avatar: string;
  first_name: string;
  last_name: string;
  age: number;
  flag1: string;
  flag2: string;
  badge_1281: number;
  badge_un: number;
  badge_supreme: number;
  badge_tbt: number;
  badge_offline: number;
  patreon: number;
  country: string;
  auth: number;
  rank: number;
  country_rank: number;
  dod: number;
  ukr: number;
  badges: number;
  arrow_nm: number;
  arrow_un: number;
  arrow_unp: number;
  arrow_dare: number;
  arrow_yes: number;
  arrow_whs: number;
  arrow_tcc: number;
  arrow_tbt: number;
  arrow_slow: number;
  arrow_kye: number;
}

export default TravellersScreen;