import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
import fonts from '../../constants/fonts'
import colors from '../../constants/colors'
import { moderateScale, screenHeight, screenWidth, verticalScale } from '../../constants/metrics'
import Header from '../../components/atoms/Header/Header'
import images from '../../assets/images/images'
import FormTextInput from '../../components/atoms/Input/FormTextInput'
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'

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

  const styles = StyleSheet.create({
    signInText: {
      fontFamily: fonts.type.bold,
      color: colors().recessive,
      alignSelf: 'center',
      fontSize: moderateScale(24)
    },
    logoContainer:{
      padding: moderateScale(16),
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: colors().dominant,
      minHeight: 600
    },
    logo:{
      height:320,
      width:'100%'
    }
  })

  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <NewscoutTitleHeader backButtonShown onBackClick={() => navigation.goBack()} />
      <Header headerStyle={{ elevation: 0 }} >
        <Text style={styles.signInText}>Forgot Password</Text>
        <View></View>
      </Header>
      <View style={styles.logoContainer}>
        <Image source={images.forgot_password} style={styles.logo}/>
        <FormTextInput label={"Email"} placeholder={"loremipsum@gmail.com"} inputContainerStyle={{width: '100%',marginVertical: verticalScale(16)}}/>
        <ThemedTextButton theme={"secondary-contained"} title={"Submit"} titleStyle={{width: '100%'}} onPress={() => navigation.navigate('OTP')}/>
      </View>
    </ScrollView>
  )
}

export default ForgotPasswordPage

const styles = StyleSheet.create({})