import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native'
import React, { useContext, useEffect } from 'react'
import { ThemeContext } from '../../context/theme.context'
import images from '../../assets/images/images'
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
import colors from '../../constants/colors'
import { moderateScale } from '../../constants/metrics'
import fonts from '../../constants/fonts'
import NewscoutTextLogo from '../../components/atoms/Logo/NewscoutTextLogo'




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

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

  const onClick = () => {
    if (currentTheme === 'dark')
      theme.dispatch({ type: "LIGHTMODE" });
    else
      theme.dispatch({ type: "DARKMODE" });
  };


  const styles = StyleSheet.create({
    pageContainer: {

    },
    text: {
      color: colors().recessive,
      fontFamily: 'Poppins-Bold'
    },
    container: {
      backgroundColor:  colors().dominant,
      justifyContent: 'center',
      flex: 1,
      paddingHorizontal: moderateScale(16)
    },
    button: {
      backgroundColor: colors().secondaryColor
    },
    logo: {
      // width: moderateScale(84),
      aspectRatio: 3.0,
      width: '100%',
      height: 64
    },
    logoContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: moderateScale(32)
    },
    sketchContainer: {
      height: '42.5%',
      width: '100%',

    },
    sketch: {
      width: '100%',
      height: '100%'
    },
    taglineContainer: {
      padding: moderateScale(16),
      paddingBottom: moderateScale(32)
    },
    tagline: {
      fontFamily:fonts.type.medium,
      fontSize: moderateScale(20)
    }

  })

  const homePageNavigation = () => {
    navigation.navigate('UnsignedPage')
  }

  return (
    <View style={[styles.container]}>
      <View style={styles.logoContainer}>
        <NewscoutTextLogo style={styles.logo} />
      </View>
      <View style={styles.sketchContainer}>
        <Image source={images.getStarted} style={[styles.sketch]} />
      </View>
      <View style={styles.taglineContainer}>
        <Text style={[styles.tagline, { color: colors().recessive}]}> Get the latest news from </Text>
        <Text style={[styles.tagline, { color: colors().primaryColor }]}> reliable sources. </Text>
      </View>
      <ThemedTextButton
        title="Next"
        theme={"secondary-contained"}
        onPress={homePageNavigation}
      />
      <TouchableOpacity onPress={onClick} ><Text style={styles.text}>dsfsdhh</Text></TouchableOpacity>

    </View>

  )
}

export default LandingPage

