import { useUser } from '@clerk/clerk-react'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Post, StatusEnum } from '../models/postModel'

export const CompactPostComponent: React.FC<Post> = (post) => {
    const { user } = useUser()
    console.log()
    console.log()

    return (
        <TouchableOpacity key={post._id} style={styles.posts}>
            <View style={styles.header}>
                <Text style={[styles.text, styles.date]}>{post.notes}</Text>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    {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>
            </View>
            <View style={styles.footer}>
                <Text style={styles.subtext}>{post.address}</Text>
                <Text style={[styles.subtext]}>{new Date(post.date).toLocaleDateString()}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    text: {
        color: '#fff',
        justifyContent: 'center'
    },
    subtext: {
        color: '#b9b9b9ff',
        justifyContent: 'center'
    },
    posts: {
        marginTop: 10,
        backgroundColor: '#373d44ff',
        borderColor: '#626e7aff',
        borderStyle: 'solid',
        borderWidth: 1,
        borderRadius: 12,
        padding: 10,
        width: '100%'
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 16
    },
    footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
    date: {
        paddingVertical: 3,
        borderRadius: 6,
        color: '#ffffff',
        fontSize: 16
    },
    statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6, fontSize: 16 },
    created: { backgroundColor: '#0d6efd', color: '#ffffff' },
    pending: { backgroundColor: '#ffc107', color: '#000000' },
    denied: { backgroundColor: '#dc3545', color: '#ffffff' },
    approved: { backgroundColor: '#198754', color: '#ffffff' }
})
