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

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

const styles = StyleSheet.create({
	separator: {
		borderBottomColor: '#cccccc',
		borderBottomWidth: 1
	},
	entryItem: {
		padding: 16,
		gap: 4
	},
	entryTitle: {
		fontSize: 20
	},
	entryMetadata: {
		color: '#aaaaaa'
	}
})

export default function FeedListView() {
	const router = useRouter()

	const { credential } = useAuthStore()
	
	const { fetch: fetchSubs, subscriptions } = useSubscription()
	fetchSubs()

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

	useEffect(() => {
		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)
		} catch (e) {
			console.log("`fetchList has an error`")
			console.log(e)
		}
	}

	function goToPost(entryId: number) {
		router.push(`./post?id=${entryId}`)
	}

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