import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import colors from '../../constants/colors'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
import OctiIcon from 'react-native-vector-icons/Octicons'
import { ScrollView } from 'react-native-gesture-handler'
import NoBookmarkSection from '../../components/organisms/Sections/NoBookmarkSection'
import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant'
import { horizontalScale, verticalScale } from '../../constants/metrics'
import AntIcon from 'react-native-vector-icons/AntDesign'

const BookmarkPage = props => {

  const [bookmarks, setBookmarks] = React.useState([])

  const { navigation, route } = props

  const styles = StyleSheet.create({
    bookmarkContainer: {
      // backgroundColor: colors().dominant,
      paddingVertical: verticalScale(16),
      paddingHorizontal: horizontalScale(16),
      gap: verticalScale(8),
      flexDirection: 'row',
      flexWrap: 'wrap',
      minHeight: '100%'
    }
  })

  return (
    <View style={{ backgroundColor: colors().dominant, minHeight: '100%', maxHeight: 'auto' }}>
      <NewscoutTitleHeader title={"My Bookmarks"} left={
        <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
          <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
        </TouchableWithoutFeedback>
      }>
        <TouchableWithoutFeedback onPress={() => {
          navigation.navigate('ProfilePage')
          navigation.navigate("SettingsPage")
        }}>
          <AntIcon name='setting' color={colors().primaryColor} size={24} />
        </TouchableWithoutFeedback>
      </NewscoutTitleHeader>

      {
        bookmarks.length <= 0 ?
          // <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ justifyContent: 'center', alignItems: 'center'}} style={{minHeight: '100%'}} >

          <NoBookmarkSection navigation={navigation} />


          // </ScrollView>
          : <ScrollView contentContainerStyle={styles.bookmarkContainer} >
            {bookmarks.map((item) => <HorizontalNewsCardVariant />)}
          </ScrollView>
      }



    </View>
  )
}

export default BookmarkPage

