import React from 'react';
import { FlatList, ScrollView, Text, View } from 'react-native';
import Divider from '../../components/Divider';
import * as performanceAnalyticsService from '../../services/performanceAnalytics/performanceAnalytics.service';
import { layout } from '../../styles';
import Modal from '../Modal';
import styles from './styles';
import { useTheme } from '../../branding';
import type { ThemeId } from '../../branding/themes';

const renderTitle = (title: string, theme: ThemeId) => (
    <Text style={styles[theme].sectionLabel}>{title}</Text>
);

const renderItem = (text: string, theme: ThemeId) => (
    <View>
        <Text style={styles[theme].textGreen}>{`\n${text}\n`}</Text>
        <Divider />
    </View>
);

const DebugPerformanceAnalyticsModal = () => {
    const { theme } = useTheme();
    const trackedTraces = [...performanceAnalyticsService.trackedTraces]
        .reverse()
        .map(it => JSON.stringify(it, null, 2));
    return (
        <Modal
            style={layout.fill}
            headerText="Debug Performance Analytics Information"
            isLoading={false}
        >
            <ScrollView contentContainerStyle={styles[theme].container}>
                {renderTitle('Performance traces', theme)}
                <FlatList
                    keyExtractor={(item, index) => `${index}_${item}`}
                    data={trackedTraces}
                    renderItem={item => renderItem(item.item, theme)}
                    style={styles[theme].section}
                />
            </ScrollView>
        </Modal>
    );
};

export default DebugPerformanceAnalyticsModal;