import { useFocusEffect } from 'expo-router'
import React, { useState } from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Post } from '../models/postModel'

export default function PostsScreen() {
    const cloudfrontURL = process.env.CLOUDFRONT_URL
    const [posts, setPosts] = useState<Post[]>()

    useFocusEffect(
        React.useCallback(() => {
            // Do something when the screen is focused
            // TODO: add endpoint to get only non approved or denied status posts
            fetchData()
            return () => {
                // Do something when the screen is unfocused
                // Useful for cleanup functions
            }
        }, [])
    )

    async function fetchData() {
        fetch('http://localhost:3000/api/v1/posts/status/created')
            .then((res) => res.json())
            .then((json) => {
                setPosts(json.data)
            })
    }

    async function approvePost(postID: string) {
        // add code to update post to approved status
        console.log('Approving post ' + postID)
        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
            method: 'PATCH',
            headers: {
                Accept: 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                status: 'approved'
            })
        }).then(() => {
            fetchData()
        })
    }

    async function denyPost(postID: string) {
        // add code to update post to remove status
        console.log('Denying post ' + postID)
        await fetch(`http://localhost:3000/api/v1/posts/${postID}`, {
            method: 'PATCH',
            headers: {
                Accept: 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                status: 'denied'
            })
        }).then(() => {
            fetchData()
        })
    }

    return (
        <View style={styles.wrapper}>
            <View style={styles.container}>
                <Text style={styles.text}>Posts</Text>
                {posts?.length ? (
                    posts.map((el) => (
                        <View key={el._id} style={styles.posts}>
                            <Text style={styles.text}>{el._id}</Text>
                            <View style={{ alignItems: 'center', marginVertical: 10 }}>
                                <Image
                                    source={{ uri: el.photo }}
                                    style={{ width: 200, height: 200, borderRadius: 8 }}
                                    resizeMode='cover'
                                />
                            </View>
                            <Text style={{ color: '#fff' }}>{el.notes}</Text>
                            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                                <TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(el._id)}>
                                    <Text
                                        style={{
                                            backgroundColor: '#bf3636ff',
                                            color: '#fff',
                                            textAlign: 'center',
                                            padding: 8,
                                            borderRadius: 4
                                        }}
                                    >
                                        Deny
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={{ flex: 1, marginLeft: 5 }}
                                    onPress={() => approvePost(el._id)}
                                >
                                    <Text
                                        style={{
                                            backgroundColor: '#17be3bff',
                                            color: '#fff',
                                            textAlign: 'center',
                                            padding: 8,
                                            borderRadius: 4
                                        }}
                                    >
                                        Approve
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    ))
                ) : (
                    <View style={styles.caughtUpContainer}>
                        <Text style={styles.caughtUpText}>All caught up!</Text>
                    </View>
                )}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#25292e',
        padding: 5
    },
    container: {
        flex: 1,
        alignItems: 'center',
        overflow: 'scroll'
    },
    text: {
        color: '#fff',
        justifyContent: 'center'
    },
    posts: {
        marginTop: 10,
        backgroundColor: '#363c43ff',
        padding: 10,
        width: '90%',
        borderRadius: 5
    },
    caughtUpContainer: {
        flex: 1,
        alignContent: 'center',
        justifyContent: 'center'
    },
    caughtUpText: {
        color: '#787b80ff'
    }
})