import { View, Text, StyleSheet, ScrollView } from 'react-native'
import { useEffect, useState } from 'react'
import axios from 'axios'
import { useAuthStore, useSubscription } from '../store'

const Separator = () => <View style={styles.separator} />

const styles = StyleSheet.create({
	separator: {
		borderBottomColor: '#cccccc',
		borderBottomWidth: 1
	},
	entryItem: {
		padding: 16
	}
})

export default function FeedListView() {
	const { credential } = useAuthStore()
	
	const { fetch: fetchSubs, subscriptions } = useSubscription()
	fetchSubs()

	const [entries, setEntries] = useState<Entry[]>([])

	useEffect(() => {
		console.log(credential)
		if (!credential) return

		fetchList()
	}, [])

	async function fetchList() {
		try {
			const res = await axios.get("https://api.feedbin.com/v2/entries.json", { auth: credential })
			const entriesRes = res.data as Entry[]
			setEntries(entriesRes)
			console.log(entriesRes[3])
		} catch (e) {
			console.log("`fetchList has an error`")
			console.log(e)
		}
	}

  return (
    <ScrollView>
			{ entries.length > 0 ? 
				entries.map(entry => <View key={entry.id}>
					<View style={styles.entryItem}>
						<Text>{entry.title}</Text>
						<Text>{entry.author && <Text>{entry.author} &middot; </Text>}{subscriptions[entry.feed_id].title}</Text>
					</View>
					<Separator />
				</View>) 
			: <Text>No entries</Text> }
    </ScrollView>
  )
}