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

const SignUpPage = props => {

  const {
    navigation,
    route
  } = props

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

  const styles = StyleSheet.create({
    container: {
      backgroundColor: colors().dominant,
      height: '100%'
    },
    signInText: {
      fontFamily: fonts.type.bold,
      color: colors().recessive,
      alignSelf: 'center',
      fontSize: moderateScale(24)
    },
    signUpSection: {
      paddingHorizontal: horizontalScale(24),
      alignItems: 'center',
    },
    signUpDescription: {
      backgroundColor: colors().dominant,
      color: colors().recessive,
      fontFamily: fonts.type.regular,
      // paddingHorizontal: horizontalScale(24),
      paddingVertical: verticalScale(16)
    },
    inputContainer: {
      paddingVertical: verticalScale(16),
      rowGap: verticalScale(8)
    },
    altLoginContainer: {
      flexDirection: 'row',
      gap: 16,
      paddingTop: 8,
      paddingVertical: verticalScale(16),
    },
    altLoginIcon: {
      height: 64,
      width: 64,
      backgroundColor: colors().dominant_variant,
      borderRadius: 16,
      justifyContent: 'center',
      alignItems: 'center'
    },
    alreadyAccountContainer:{
      flexDirection: 'row',
      
      alignItems: 'center',
      justifyContent: 'center'
    }
  })

  return (

    <View style={styles.container}>
      <ScrollView>
      <NewscoutHomeHeader headerStyle={{elevation: 0}}/>
      <Header backButtonShown onBackClick={() => navigation.goBack()}>
        <Text style={styles.signInText}>Sign Up</Text>
        <View></View>
      </Header>
      <View style={styles.signUpSection}>
        <View>
          <Text style={styles.signUpDescription}>Please fill up your detail to create an account.</Text>
          <View style={styles.inputContainer}>
            <FormTextInput label={"First Name"} placeholder={"First Name"} />
            <FormTextInput label={"Last Name"} placeholder={"Last Name"} />
            <FormTextInput label={"Email"} placeholder={"Email"} />
            <FormTextInput label={"Password"} placeholder={"Password"} />
          </View>
          <ThemedTextButton title={"Sign Up"} theme={'secondary'} onPress={() => navigation.navigate('ChooseTopic')}/>
        </View>

        <View style={{paddingVertical: verticalScale(16)}}>
          <Text style={{ textAlign: 'center', fontFamily: fonts.type.medium, color: colors().recessive }}>
            or continue with
          </Text>
          <View style={styles.altLoginContainer}>
            <TouchableOpacity>
              <View style={styles.altLoginIcon}>
                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity>
              <View style={styles.altLoginIcon}>
                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity>
              <View style={styles.altLoginIcon}>
                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity>
              <View style={styles.altLoginIcon}>
                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.alreadyAccountContainer}>
          <Text style={{ color:colors().recessive, fontFamily: fonts.type.regular, paddingBottom: 16 }}>Already have an account? </Text>
          <TouchableOpacity>
            <Text style={{ color: currentTheme === 'light' ? colors().secondaryColor : colors().primaryColor, fontFamily: fonts.type.regular, paddingBottom: 16 , paddingLeft: 4}}>Login </Text>
          </TouchableOpacity>
        </View>


      </View>
      </ScrollView>
    </View>

  )
}

export default SignUpPage

