<template>
<div class="sub-reply-group bs-callout bs-callout-success">
    <ul class="list-group list-group-flush">
        <li
            v-for="(subReply, subReplyGroupIndex) in subReplyGroup" :key="subReply.spid"
            :id="`spid/${subReply.spid}`" class="sub-reply-item list-group-item"
            :class="{ 'highlight-post': highlightPostStore.isHighlightingPost(subReply, 'spid') }">
            <article>
                <address v-for="author in [getUser(subReply.authorUid)]" :key="author.uid" class="d-inline">
                    <NuxtLink
                        v-if="subReplyGroup[subReplyGroupIndex - 1] === undefined"
                        :to="toUserRoute(author.uid)" noPrefetch
                        class="sub-reply-author text-wrap badge bg-light d-inline-flex align-items-center gap-2">
                        <UserPortrait :user="author" size="small" />
                        <span class="align-middle link-dark">
                            {{ renderUsername(subReply.authorUid) }}
                        </span>
                        <PostBadgeUser
                            :user="getUser(subReply.authorUid)"
                            :threadAuthorUid="thread.authorUid"
                            :replyAuthorUid="reply.authorUid" />
                    </NuxtLink>
                </address>
                <aside class="float-end d-inline-flex align-items-center gap-1 badge bg-light fs-6 p-1 pe-2" role="group">
                    <PostBadgeCommon :post="subReply" postIDKey="spid" postTypeText="楼中楼" />
                    <PostBadgeTime
                        postType="楼中楼"
                        :parentPost="reply" parentPostIDKey="pid"
                        :currentPost="subReply" currentPostIDKey="spid"
                        :previousPost="getSiblingSubReply(subReplyGroupIndex, 'previous')"
                        :nextPost="getSiblingSubReply(subReplyGroupIndex, 'next')"
                        postTimeKey="postedAt" timestampType="发帖时间"
                        class="bg-info" />
                </aside>
                <PostRendererContent :content="subReply.content" class="sub-reply-content" />
            </article>
        </li>
    </ul>
</div>
</template>

<script setup lang="ts">
const { previousSubReplyGroup, subReplyGroup, nextSubReplyGroup } = defineProps<{
    thread: Thread,
    reply: Reply,
    previousSubReplyGroup?: SubReply[],
    subReplyGroup: SubReply[],
    nextSubReplyGroup?: SubReply[]
}>();
const highlightPostStore = useHighlightPostStore();
const { getUser, renderUsername } = usePostPageProvision().inject();
const getSiblingSubReply = (index: number, direction: 'previous' | 'next') =>
    subReplyGroup[index + (direction === 'next' ? 1 : -1)] as SubReply | undefined
        ?? (direction === 'next' ? nextSubReplyGroup?.[0] : previousSubReplyGroup?.at(-1));
</script>

<style scoped>
.sub-reply-group {
    margin-block-start: unset !important;
    padding: .25rem;
}
.sub-reply-item {
    padding: .125rem;
}
.sub-reply-author, .sub-reply-content {
    padding: .25rem;
}
.sub-reply-author {
    font-size: .9rem;
}
</style>
