import { initialState, Post, StatusEnum } from '@/app/models/postModel';
import { useFocusEffect, useLocalSearchParams } from 'expo-router';
import React, { useState } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';




export default function DetailsScreen() {
    const isProfileView = window.location.href.includes('/profile')
    const [post, setPost] = useState<Post>(initialState);
    const {id}  = useLocalSearchParams()
    console.log(id);

    useFocusEffect(
            React.useCallback(() => {
                // Do something when the screen is focused
                // TODO: add endpoint to get only non approved or denied status posts
                fetch(`http://localhost:3000/api/v1/posts/${id}`)
                    .then((res) => res.json())
                    .then((json) => {
                        console.log(json)
                        setPost(json.data)
            })
                return () => {
                    // Do something when the screen is unfocused
                    // Useful for cleanup functions
                }
            }, [])
        )

    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(() => {
                // Nav back to posts page
            })
        }
    
        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(() => {
                // Nav back to posts page
            })
        }

    return (
        <View key={post._id} style={styles.constainer}>
                    <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>
                    {isProfileView ? (
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                            {post.status === StatusEnum.Created && (
                                <Text style={[styles.created, styles.statusTag]}>Created</Text>
                            )}
                            {post.status === StatusEnum.Pending && (
                                <Text style={[styles.pending, styles.statusTag]}>Pending</Text>
                            )}
                            {post.status === StatusEnum.Denied && <Text style={[styles.denied, styles.statusTag]}>Denied</Text>}
                            {post.status === StatusEnum.Approved && (
                                <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
                            )}
                        </View>
                    ) : null}
                    {!isProfileView ? (
                        <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>
                    ) : null}
                </View>
    )
}

const styles = StyleSheet.create({
    text: {
        color: '#fff',
        justifyContent: 'center'
    },
    constainer: {
        backgroundColor: '#373d44ff',
        padding: 10,
        flex: 1
    },
    statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6 },
    created: { backgroundColor: '#0d6efd', color: '#ffffff' },
    pending: { backgroundColor: '#ffc107', color: '#000000' },
    denied: { backgroundColor: '#dc3545', color: '#ffffff' },
    approved: { backgroundColor: '#198754', color: '#ffffff' }
})