import { Image, ImageBackground, ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import images from '../../../assets/images/images'
import fonts from '../../../constants/fonts'
import colors from '../../../constants/colors'
import { horizontalScale, moderateScale, screenHeight, verticalScale } from '../../../constants/metrics'
import ThemedTextButton from '../../molecules/Buttons/ThemeTextButton'
import { navigateToHomePage } from '../../../constants/functions'
import { useNavigation } from '@react-navigation/native'


const NoBookmarkSection = props => {

  const {
    navigation,
    route
  } = props
  

  const styles = StyleSheet.create({
    container: {
      backgroundColor: colors().dominant,
      height: '100%',
      minHeight: '100vh',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: horizontalScale(16)
    },
    imageContainer: {

    },
    image: {
      height: 300,
      width: 300,
      maxHeight: '80%',
      maxWidth: '80%'
    },
    headline: {
      color: colors().primaryColor,
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(16),
      paddingBottom: verticalScale(32)
    },
    button: {
      backgroundColor: colors().secondaryColor,
      marginHorizontal: horizontalScale(24),
      maxWidth: '100%',
      width: '100%',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: moderateScale(4)
    },
    buttonText: {

      paddingVertical: verticalScale(12),
      color: colors().recessive,
      fontFamily: fonts.type.regular
    }
  })

  return (
    <ScrollView contentContainerStyle={{minHeight: '100%'}}showsVerticalScrollIndicator={false}>
      <View style={styles.container}>
        <View style={styles.imageContainer}><Image source={images.noBookmark} style={[styles.image]} /></View>
        <Text style={styles.headline}>You have no bookmarked news</Text>
        <ThemedTextButton title={"Explore News"} theme={"secondary-contained"} buttonStyle={{ minWidth: '100%' }} onPress={navigateToHomePage(navigation)} />
        {/* <TouchableWithoutFeedback onPress={null}>
        <View style={styles.button}><Text style={styles.buttonText}>Explore News</Text></View>
      </TouchableWithoutFeedback> */}
      </View>
    </ScrollView>

  )
}

export default NoBookmarkSection

