<script setup lang="ts">
import type { AppBskyFeedDefs } from "@atcute/bluesky";
import { extractPostId } from "~/util/atproto";

const props = defineProps<{
    post: AppBskyFeedDefs.ThreadViewPost;
    depth: number;
}>();
const { post, depth } = toRefs(props);

const MAX_DEPTH = 3; // Max number of replies to a reply

console.log(post);
</script>

<template>
<div v-if="post && depth < MAX_DEPTH" class="mt-6 bsky-post">
    <a :href="`https://bsky.app/profile/${post.post.author.handle}`">
        <img :src="post.post.author.avatar" :alt="post.post.author.displayName" class="size-8 rounded-full" />
    </a>
    <div class="flex flex-col gap-1">
        <a :href="`https://bsky.app/profile/${post.post.author.handle}`" class="text-md font-bold w-fit">
            {{ post.post.author.displayName }}
        </a>
        <div>
            {{ post.post.record.text }}
        </div>
        <div class="flex items-baseline gap-4 mt-2">
            <p class="text-gray-500 text-sm" title="Replies">
                <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
                {{post.post.replyCount}}
            </p>
            <p class="text-gray-500 text-sm" title="Likes">
                <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
                <span>
                    {{post.post.likeCount}}
                </span>
            </p>
            <p class="text-gray-500 text-sm" title="Bookmarks">
                <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
                {{post.post.bookmarkCount}}
            </p>
        </div>

        <div v-if="post.replies && post.replies.length > 0">
            <div v-if="depth+1 === MAX_DEPTH">
                <a :href="`https://bsky.app/profile/${post.post.author.handle}/post/${extractPostId(post.post.uri)}`" class="text-gray-500 text-sm flex items-center gap-2 mt-4">
                    View more replies on Bluesky
                    <Icon name='ri:arrow-drop-right-line' />
                </a>
            </div>
            <div v-else v-for="reply in post.replies">
                <BskyPost v-if="reply.$type === 'app.bsky.feed.defs#threadViewPost'" :post="reply" :depth="depth + 1" />
            </div>
        </div>
    </div>
</div>
</template>

<style scoped>
.bsky-post {
    @apply gap-2 md:gap-4;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "avatar content";
    align-items: start;

    & > a:has(> img) {
        grid-area: avatar;
    }

    & > div {
        grid-area: content;
    }

}
</style>
