import React, { useEffect, useState } from 'react';
import { getList, ListData } from '../../../../database/statisticsService';
import { Header, Loading, PageWrapper } from '../../../../components';

import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NAVIGATION_PAGES } from '../../../../types';
import ArrowIcon from '../../../../../assets/icons/mark-to-up.svg';
import { styles } from './styles';

const StatisticsScreen = () => {
  const [index, setIndex] = useState<number | null>(null);
  const [routes, setRoutes] = useState<{ key: string; title: string; list?: ListData[] }[]>([]);
  const [loading, setLoading] = useState(true);

  const navigation = useNavigation();

  useEffect(() => {
    const types = getList();

    const parseRoutes = types?.map((item) => ({
      key: item.name,
      list: item.list,
      sublist: item.sublists,
      title: item.name
    }));

    setRoutes(parseRoutes || []);
    setLoading(false);
  }, []);

  if (loading) return <Loading />;

  return (
    <>
      <PageWrapper>
        <ScrollView showsVerticalScrollIndicator={false}>
          <Header label={'Statistics'} />
          <View style={{ gap: 8 }}>
            {routes.map((route, i) => {
              let name = route.title;
              let subname: string = '';

              if (route.title.startsWith('NOMADS STATISTICS')) {
                name = route.title.replace(/<[^>]*>/g, '!');

                const split = name.split('!');

                name = split[0];
                subname = split[2];
              }

              return (
                <View key={i}>
                  <TouchableOpacity
                    onPress={() => setIndex(index === i ? null : i)}
                    style={styles.itemContainer}
                  >
                    <View>
                      <Text style={styles.title}>{route.title && name}</Text>
                      {subname && <Text style={styles.subtitle}>{subname}</Text>}
                    </View>
                    <View style={index === i ? { transform: 'rotate(180deg)' } : {}}>
                      <ArrowIcon height={18} width={18} stroke={'#B7C6CB'} />
                    </View>
                  </TouchableOpacity>
                  {index === i && (
                    <View>
                      {route.list?.map((item, index) => {
                        return (
                          <TouchableOpacity
                            key={index}
                            onPress={() =>
                              navigation.navigate(
                                ...([
                                  NAVIGATION_PAGES.STATISTICS_LIST_DATA,
                                  {
                                    title: item.name,
                                    type: route.title,
                                    url1: item.url1,
                                    url2: item.url2
                                  }
                                ] as never)
                              )
                            }
                            style={styles.listItem}
                          >
                            <Text style={styles.subtitle}>• </Text>
                            <Text
                              style={[
                                styles.subtitle,
                                {
                                  flexShrink: 1
                                }
                              ]}
                            >
                              {item.name}
                            </Text>
                          </TouchableOpacity>
                        );
                      })}
                    </View>
                  )}
                </View>
              );
            })}
          </View>
        </ScrollView>
      </PageWrapper>
    </>
  );
};
export default StatisticsScreen;
