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

const props = defineProps({
    cid: {
        type: String,
        required: true
    }
});
const { cid } = toRefs(props);

const data = ref(await getBskyReplies(cid.value));
const err = ref("");
const post = ref<AppBskyFeedDefs.ThreadViewPost>();

if (data.value.$type === "app.bsky.feed.defs#blockedPost") {
    err.value = "Post is blocked";
}

if (data.value.$type === "app.bsky.feed.defs#notFoundPost") {
    err.value = "Post not found";
}

if (data.value.$type === "app.bsky.feed.defs#threadViewPost") {
    console.log(data.value);
    post.value = data.value as AppBskyFeedDefs.ThreadViewPost;
}
</script>

<template>
    <div class="md:w-[80%] mx-auto mt-16">
        <div class="flex items-baseline flex-col md:flex-row md:gap-4 mb-2 md:mb-0">
            <h3 class="font-bold text-xl">Join the conversation!</h3>
            <div v-if="post" class="flex items-center gap-6">
                <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" />
                    {{post.post.likeCount}}
                </p>
                <p class="text-gray-500 text-sm" title="Reposts">
                    <Icon name="bx:repost" class="-mb-[2px] mr-1" />
                    {{post.post.repostCount}}
                </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>

        <div v-if="err">
            <p class="mt-2 text-gray-700 dark:text-gray-500">
                {{ err }}
            </p>
        </div>

        <p v-if="post" class="text-gray-600 dark:text-gray-500 text-md mb-6">
            <a class="underline" :href="`https://bsky.app/profile/${post.post.author.handle}/post/${cid}`">Reply on Bluesky</a> to take part in the discussion.
        </p>


        <div v-if="post">
            <div v-if="post.post.replyCount === 0">
                <div>No replies yet!</div>
            </div>

            <BskyPost
                v-else
                v-for="reply in post.replies?.filter(reply => reply.$type === 'app.bsky.feed.defs#threadViewPost')"
                :key="reply.post.cid"
                :post="reply"
                :depth="0"
            />
        </div>
    </div>
</template>
