import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Image } from 'react-native'
import React, { useContext } from 'react'
import { ThemeContext } from '../../context/theme.context'
import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
import colors from '../../constants/colors'
import NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
import fonts from '../../constants/fonts'
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
import FormTextInput from '../../components/atoms/Input/FormTextInput'
import Header from '../../components/atoms/Header/Header'
import images from '../../assets/images/images'
import NewscoutCenteredLogoHeader from '../../components/molecules/Header/NewscoutCenteredLogoHeader'

const SignInPage = props => {
    const { navigation, route } = props

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme

    const styles = StyleSheet.create({
        container: {
            backgroundColor: colors().dominant,
            flex: 1
        },
        signInText: {
            fontFamily: fonts.type.bold,
            color: colors().recessive,
            alignSelf: 'center',
            fontSize: moderateScale(24)
        },
        loginSection: {
            paddingHorizontal: horizontalScale(24),
            height: "max-content",
            alignItems: 'center',
            justifyContent: 'space-between',
            flex: 1
        },
        loginDescription: {
            backgroundColor: colors().dominant,
            color: colors().recessive,
            fontFamily: fonts.type.regular,
            // paddingHorizontal: horizontalScale(24),
            paddingVertical: verticalScale(16)
        },
        inputContainer: {
            paddingVertical: verticalScale(16),
            rowGap: verticalScale(16)
        },
        forgotPasswordText:{
            color: colors().recessive,
            fontFamily: fonts.type.regular,
            paddingVertical: verticalScale(16),
            textAlign: 'center',
            textDecorationLine: 'underline'
        }
    })

    const navigateToHome = () => {
        navigation.reset({
            index: 0,
            routes: [{name: 'HomePageNav'}]
        })
    }

    return (
        
            <View style={styles.container}>
                {/* <NewscoutHomeHeader headerStyle={{elevation:0}}/> */}
                <NewscoutCenteredLogoHeader />
                <Header headerStyle={{elevation:0}} backButtonShown onBackClick={() => navigation.goBack()}>
                    <Text style={styles.signInText}>Sign In</Text>
                    <View></View>
                </Header>
                <View style={styles.loginSection}>
                    <View>
                        <Text style={styles.loginDescription}>Log In to your account to explore the article and news.</Text>
                        <View style={styles.inputContainer}>
                            <FormTextInput placeholder={"Email"} />
                            <FormTextInput placeholder={"Password"} />
                        </View>
                        <ThemedTextButton title={"Login"} theme={'secondary'} onPress={navigateToHome}/>
                        <TouchableOpacity onPress={() => navigation.navigate('ForgotPassword')}><Text style={styles.forgotPasswordText}>Forgot Password</Text></TouchableOpacity>
                    </View>



                </View>
                <View style={{ paddingBottom: verticalScale(32), paddingHorizontal: horizontalScale(24) }}>
                    <ThemedTextButton title={"Create an Account"} theme={currentTheme === 'light' ? "white" : 'black'} onPress={() => navigation.navigate("SignUp")} />
                </View>
                
            </View>
        
    )
}

export default SignInPage

