import React from 'react'
import {Alert, NativeModules, ScrollView, StyleSheet, Text, View} from 'react-native'
import {connect} from 'react-redux'

import {Images} from '/images'
import {Styles} from '/styles'
import {BaseComponent, ImageButton} from '/widgets'

const styles = {
    container: {
        backgroundColor: Styles.Color.White,
        flex: 1,
    },
    field: {
        paddingHorizontal: Styles.Size.Small,
        paddingVertical: Styles.Size.XSmall,
    },
    text: {
        backgroundColor: Styles.Color.Clear,
        color: Styles.Color.Grey700,
        fontFamily: Styles.Font.Family.RobotoRegular,
        fontSize: Styles.Font.Size.Small,
    },
    fieldValue: {
        flex: 1
    },
}

const stylesheet = StyleSheet.create(styles)

/**
 * Component for the header reset button.
 */
class ResetButton extends BaseComponent {
    fullReset = () => {
        const reset = () => {
            this.props.storage
                .persistor
                .purge()
                .then(() => { NativeModules.nav.restart() })
        }

        Alert.alert(
            'Reset NewsCats',
            (
                'Are you sure you want to reset the entire NewsCats application?\n\n' +
                'This will remove all your favorites and custom sources.'
            ),
            [ {text: 'Cancel',  style: 'cancel'}, {text: 'Reset', onPress: reset} ],
            { cancelable: true }
        )
    }

    render() {
        return (
            <ImageButton imageSource={Images.reset}
                         onPress={this.fullReset} />
        )
    }
}

ResetButton = connect((state) => ({ storage: state.storage }))(ResetButton)

/**
 * Simple screen displaying the application's current environment.
 */
class DebugScreen extends BaseComponent {
    static navigationOptions = {
        title: 'Debug Information',
        headerRight: (<ResetButton />),
    }

    constructor(props) {
        super(props)

        this.state = { }

        NativeModules.env.current((err, jsonString) => {
            const currentEnv = JSON.parse(jsonString)
            NativeModules.env.globalConfig((err, jsonString) => {
                const env = {
                    ...currentEnv,
                    ...JSON.parse(jsonString),
                }

                this.setState({ env:  env})
            })
        })
    }

    renderFields() {
        return Object.keys(this.state.env)
            .sort()
            .map((key) => {
                const value = this.state.env[key]

                return (
                    <View key={key}
                          style={stylesheet.field}>

                        <Text style={[stylesheet.text, stylesheet.fieldLabel]}>{key}: </Text>
                        <Text style={[stylesheet.text, stylesheet.fieldValue]}>{value + ""}</Text>

                    </View>
                )
            })
    }

    render() {
        return (
            <ScrollView style={stylesheet.container}>
                {this.state.env && this.renderFields()}
            </ScrollView>
        )
    }
}

export {
    DebugScreen,
}

@@ -758,16 +758,250 @@
 tyles)%0A%0A
+// Set of whitelisted environment field names that are allowed to be shown for non debug environments.%0Aconst WHITELISTED_ENVIRONMENT_FIELDS = new Set(%5B%0A    'build',%0A    'bundleId',%0A    'installationId',%0A    'name',%0A    'version',%0A%5D)%0A%0A
 /**%0A * C
@@ -2611,24 +2611,81 @@
 rFields() %7B%0A
+        const isDebug = (this.state.env.name == 'debug')%0A
         retu
@@ -2759,24 +2759,151 @@
 ((key) =%3E %7B%0A
+                if (!isDebug && !WHITELISTED_ENVIRONMENT_FIELDS.has(key)) %7B%0A                    return null%0A                %7D%0A%0A
             

Trim which environment fields are displayed in release builds