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

type PostComponentProps = {
    post: Post
    fetchData: () => void
}

export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData }) => {
    async function approvePost(postID: string) {
        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) {
        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 key={post._id} style={styles.posts}>
            <Text style={styles.text}>{post._id}</Text>
            <View style={{ alignItems: 'center', marginVertical: 10 }}>
                <Image
                    source={{ uri: post.photo }}
                    style={{ width: 200, height: 200, borderRadius: 8 }}
                    resizeMode='cover'
                />
            </View>
            <Text style={{ color: '#fff' }}>{post.notes}</Text>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                <TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(post._id)}>
                    <Text
                        style={{
                            backgroundColor: '#bf3636ff',
                            color: '#fff',
                            textAlign: 'center',
                            padding: 8,
                            borderRadius: 4
                        }}
                    >
                        Deny
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity style={{ flex: 1, marginLeft: 5 }} onPress={() => approvePost(post._id)}>
                    <Text
                        style={{
                            backgroundColor: '#17be3bff',
                            color: '#fff',
                            textAlign: 'center',
                            padding: 8,
                            borderRadius: 4
                        }}
                    >
                        Approve
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    text: {
        color: '#fff',
        justifyContent: 'center'
    },
    posts: {
        marginTop: 10,
        backgroundColor: '#363c43ff',
        padding: 10,
        width: '90%',
        borderRadius: 5
    }
})