import React from 'react';
import { ScrollView, Share, Text, View } from 'react-native';
import { useRoute } from '@react-navigation/native';
import ActionButton from '../../components/Buttons/ActionButton';
import { layout } from '../../styles';
import Modal from '../Modal';
import themedStyles from './styles';
import { useTheme } from '../../branding';

const DebugLogItemModal = () => {
    const route = useRoute();
    const { theme } = useTheme();
    const styles = themedStyles[theme];
    // @ts-ignore
    const optionalText: string | undefined = route?.params?.text;
    const text = optionalText ?? '';

    return (
        <Modal style={layout.fill} headerText="Debug Log" isLoading={false}>
            <ScrollView contentContainerStyle={styles.container}>
                <View>
                    <Text style={styles.sectionLabel}>Log</Text>
                    <Text style={styles.textGreen}>{text}</Text>
                </View>
            </ScrollView>
            <ActionButton
                style={styles.button}
                title="Share Log"
                onPress={async () =>
                    await Share.share({
                        title: 'Share Log',
                        message: text
                    }).catch(() => {})
                }
            />
        </Modal>
    );
};

export default DebugLogItemModal;