import { useUser } from '@clerk/clerk-react'
import { useFocusEffect } from 'expo-router'
import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { CompactPostComponent } from '../../components/CompactPostComponent'
import { SignOutButton } from '../../components/SignOutButton'
import { Post } from '../../models/postModel'

export default function PostsScreen() {
    const { user } = useUser()
    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/user/${user?.id}`)
            .then((res) => res.json())
            .then((json) => {
                console.log(json)
                setPosts(json.data)
            })
    }

    return (
        <>
            <View style={styles.wrapper}>
                <View style={styles.profileInfoCard}>
                    <View style={styles.profilePic}>
                        <Image source={{ uri: user?.imageUrl }} style={styles.image}></Image>
                    </View>
                    <View style={styles.nameContainer}>
                        <Text style={styles.text}>
                            {user?.firstName} {user?.lastName}
                        </Text>
                        <Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
                    </View>
                    <View style={styles.buttonLayout}>
                        <SignOutButton></SignOutButton>
                    </View>
                </View>
                <View style={styles.userPostsCard}>
                    {posts?.length ? (
                        posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
                    ) : (
                        <View style={styles.noPostsContainer}>
                            <Text style={styles.noPosts}>Your posts will show up here!</Text>
                        </View>
                    )}
                </View>
            </View>
        </>
    )
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#25292e',
        padding: 16,
        overflow: 'scroll'
    },
    profileInfoCard: {
        backgroundColor: '#373d44ff',
        marginTop: 12,
        borderColor: '#626e7aff',
        borderStyle: 'solid',
        borderWidth: 1,
        borderRadius: 12
    },
    profilePic: {
        marginTop: 12,
        display: 'flex',
        alignItems: 'center'
    },
    image: {
        height: 75,
        width: 75,
        borderRadius: 37.5
    },
    nameContainer: { display: 'flex', alignItems: 'center' },
    text: {
        color: 'white',
        fontSize: 16,
        marginTop: 6
    },
    buttonLayout: {
        alignItems: 'center',
        marginVertical: 12
    },
    userPostsCard: {
        flex: 1
    },
    noPostsContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    noPosts: {
        color: '#787b80ff'
    }
})