import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { SafeAreaView } from 'react-native-safe-area-context';
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
import { ScrollView } from 'react-native-gesture-handler';
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton';
import FormTextInput from '../../components/atoms/Input/FormTextInput';
import { capitalize } from '../../constants/functions';
import colors from '../../constants/colors';

const ContactPage = props => {

    const { navigation, route } = props

    const [contactDetails, setContactDetails] = React.useState({
        fullname: '',
        email: '',
        message: ''
    });

    return (
        <SafeAreaView style={{backgroundColor: colors().dominant, height: '100%'}}>
            <NewscoutTitleHeader title={"Contact Us"} backButtonShown onBackClick={() => navigation.goBack()} />
            <ScrollView showsVerticalScrollIndicator>
                <SafeAreaView style={{ padding: 16, gap: 8 }}>
                    {Object.keys(contactDetails).map(key => <FormTextInput
                        title={capitalize(key)}
                        placeholder={capitalize(key)}
                        value={contactDetails[key]}
                        multiline={key === "message" ? true : false}
                        onChange={text =>
                            setProfileData(prev => ({ ...prev, [key]: text }))
                        }
                    />)}
                    <ThemedTextButton
                        title={'Contact Us'}
                        onPress={true}
                        theme={'secondary-contained'}
                        buttonStyle={{
                            marginVertical: 16,
                            width: 'auto'
                        }} />
                </SafeAreaView>
            </ScrollView>
        </SafeAreaView>
    )
}

export default ContactPage

const styles = StyleSheet.create({})