import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
import { List } from 'react-native-paper';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import colors from '../../constants/colors';
import fonts from '../../constants/fonts';
import { ScrollView } from 'react-native-gesture-handler';


const HelpPage = props => {

    const {
        navigation,
        route
    } = props


    const listItems = [
        {
            id: 0,
            title: 'FAQ',
            onPress: () => navigation.navigate('FAQPage'),
        },
        {
            id: 1,
            title: 'Contact Us',
            onPress: () => navigation.navigate('ContactPage'),
        },
        {
            id: 2,
            title: 'Terms & Conditions',
            onPress: () => navigation.navigate('TermsConditionsPage'),
        },
        {
            id: 3,
            title: 'Privacy Policy',
            onPress: () => navigation.navigate('PrivacyPolicyPage'),
        },
        {
            id: 4,
            title: 'About Us',
            onPress: () => navigation.navigate('AboutUsPage'),
        },
    ];

    const styles = StyleSheet.create({
        listItemText: {
            fontFamily: fonts.type.medium,
            color: colors().recessive
        },
        listItem: {
            height: 64,
            justifyContent: 'center',
        },
    });

    return (
        <View style={{ backgroundColor: colors().dominant, height: '100%' }}>
            <NewscoutTitleHeader
                title={'Help'}
                backButtonShown
                onBackClick={() => navigation.goBack()}
            />
            <ScrollView>
                <View>

                    {listItems.map(item => (
                        <TouchableOpacity onPress={item.onPress}>
                            <List.Item
                                title={item.title}
                                titleStyle={styles.listItemText}
                                style={styles.listItem}
                                key={item.id}
                                right={props => (
                                    <EntypoIcon
                                        name="chevron-thin-right"
                                        size={16}
                                        color={colors().recessive}
                                    />
                                )}
                            />
                        </TouchableOpacity>
                    ))}
                </View>

            </ScrollView>

        </View>
    )
}

export default HelpPage

