import { Text, View, StyleSheet, ScrollView, useWindowDimensions } from 'react-native'
import { useLocalSearchParams } from 'expo-router'
import axios from 'axios'
import { useAuthStore, useSubscription } from '../store'
import { useEffect, useState } from 'react'
import RenderHtml from 'react-native-render-html'

export default() => {
	const { id } = useLocalSearchParams()

	const [post, setPost] = useState<Entry | undefined>(undefined)

	const { credential } = useAuthStore()

	const { subscriptions } = useSubscription()

	const { width: screenWidth } = useWindowDimensions()

	useEffect(() => {
		fetchPost()
	}, [])

	const styles = StyleSheet.create({
		page: {
			padding: 16,
			gap: 16,
			paddingBottom: 32
		},
		postHeader: {
			gap: 8
		},
		postTitle: {
			fontSize: 24,
			fontWeight: 600
		},
		metadata: {
			color: "#aaaaaa"
		}
	})

	async function fetchPost() {
		try {
			const res = await axios.get(`https://api.feedbin.com/v2/entries/${id}.json`, { auth: credential })
			setPost(res.data) 
		} catch(e) {
			console.log('`fetchPost` (post.tsx) has encounted an error')
			console.log(e)
		}
	}

	if (post) {
		return <ScrollView>
			<View style={styles.page}>
				<View style={styles.postHeader}>
					<Text style={styles.postTitle}>{post.title}</Text>
					<Text style={styles.metadata}>{post.author && <Text>{post.author} &middot; </Text>}{subscriptions[post.feed_id].title}</Text>
				</View>
				<RenderHtml 
					contentWidth={screenWidth}
					ignoredDomTags={['title']}
					source={{ html: post.content }} 
					baseStyle={{
						fontSize: 18,
					}}
					tagsStyles={{
  						body: {
    						color: '#333',
    						fontSize: 16,
    						lineHeight: 24,
  						},
  						h1: {
    						fontSize: 24,
    						fontWeight: '700',
 					   		marginBottom: 12,
						},
						h2: {
							fontSize: 20,
							fontWeight: '600',
    						marginBottom: 10,
  						},
  						h3: {
							fontSize: 18,
							fontWeight: '600',
							marginBottom: 8,
						},
						p: {
							marginBottom: 12,
						},
						a: {
							color: '#1e90ff',
							textDecorationLine: 'underline',
						},
						strong: {
							fontWeight: 'bold',
						},
						em: {
							fontStyle: 'italic',
						},
						i: {
							fontStyle: 'italic',
						},
						b: {
							fontWeight: 'bold',
						},
						ul: {
							paddingLeft: 20,
							marginBottom: 12,
						},
						ol: {
							paddingLeft: 20,
							marginBottom: 12,
						},
						li: {
							marginBottom: 6,
						},
						img: {
							marginVertical: 12
						},
						blockquote: {
							borderLeftWidth: 4,
							borderLeftColor: '#ccc',
							paddingLeft: 12,
							color: '#555',
							fontStyle: 'italic',
							marginVertical: 12,
						},
						code: {
							fontFamily: 'monospace',
							backgroundColor: '#f4f4f4',
							padding: 4,
							borderRadius: 4,
						},
						pre: {
							backgroundColor: '#f4f4f4',
							padding: 12,
							borderRadius: 6,
							fontFamily: 'monospace',
							marginBottom: 12,
						},
						hr: {
							borderBottomWidth: 1,
							borderBottomColor: '#ccc',
							marginVertical: 12,
						},
					}}
				/>
			</View>
		</ScrollView>
	} else {
		return <Text>{id}</Text>
	}
}