import React from 'react';
import { FlatList, ScrollView, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Divider from '../../components/Divider';
import TouchableOpacity from '../../components/TouchableOpacity';
import { DEBUG_LOG_ITEM_MODAL } from '../../constants/screens';
import * as loggerService from '../../services/logger.service';
import { layout } from '../../styles';
import Modal from '../Modal';
import themedStyles from './styles';
import { useTheme } from '../../branding';

const MAX_TEXT_SIZE = 300;

const DebugLogsListModal = () => {
    const navigation = useNavigation();
    const { theme } = useTheme();
    const styles = themedStyles[theme];
    const trackedTraces = [...loggerService.logs]
        .reverse()
        .map(it => JSON.stringify(it, null, 2));
    return (
        <Modal style={layout.fill} headerText="Debug Logs" isLoading={false}>
            <ScrollView contentContainerStyle={styles.container}>
                <Text style={styles.sectionLabel}>Logs</Text>
                <FlatList
                    keyExtractor={(item, index) => `${index}_${item}`}
                    data={trackedTraces}
                    renderItem={item => {
                        const text = item.item;
                        const suffix =
                            text.length > MAX_TEXT_SIZE ? ' ...' : '';
                        const adjustedText = `\n${text.substring(
                            0,
                            MAX_TEXT_SIZE
                        )}${suffix}\n`;
                        return (
                            <TouchableOpacity
                                onPress={() => {
                                    // @ts-ignore
                                    navigation.navigate(DEBUG_LOG_ITEM_MODAL, {
                                        text
                                    });
                                }}
                            >
                                <View>
                                    <Text style={styles.textGreen}>
                                        {adjustedText}
                                    </Text>
                                    <Divider />
                                </View>
                            </TouchableOpacity>
                        );
                    }}
                    style={styles.section}
                />
            </ScrollView>
        </Modal>
    );
};

export default DebugLogsListModal;