import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';

import { Header, PageWrapper } from 'src/components';

import { useNavigation } from '@react-navigation/native';
import { useGetSeriesGroupsRanking } from '@api/series';
import { styles } from './styles';
import { NAVIGATION_PAGES } from 'src/types';

const SeriesRankingScreen = () => {
  const navigation = useNavigation();
  const { data: groups } = useGetSeriesGroupsRanking(true);

  return (
    <PageWrapper>
      <Header label="Series Ranking" />
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{ gap: 8 }}>
          {groups?.data.map((route, i) => {
            return (
              <View key={i}>
                <TouchableOpacity
                  style={styles.itemContainer}
                  onPress={() =>
                    navigation.navigate(
                      ...([
                        NAVIGATION_PAGES.SERIES_RANKING_LIST,
                        {
                          name: route.name,
                          id: route.id,
                          series: route.series
                        }
                      ] as never)
                    )
                  }
                >
                  <View>
                    <Text style={styles.title}>{route.name}</Text>
                  </View>
                </TouchableOpacity>
              </View>
            );
          })}
        </View>
      </ScrollView>
    </PageWrapper>
  );
};

export default SeriesRankingScreen;
