<template>
<article :id="`pid/${reply.pid}`" :class="{ 'not-match-query-reply': !reply.isMatchQuery }">
    <header
        ref="stickyTitleEl"
        :class="{
            'viewport-topmost-post': !supportScrollState
                && viewportTopmostPostStore.viewportTopmostPost?.cursor === currentCursor
                && viewportTopmostPostStore.viewportTopmostPost.tid === reply.tid
                && viewportTopmostPostStore.viewportTopmostPost.pid === reply.pid,
            'highlight-post': highlightPostStore.isHighlightingPost(reply, 'pid')
        }"
        class="reply-title sticky-top card-header">
        <div class="sticky-stuck-indicator" :data-cursor="currentCursor" :data-tid="reply.tid" :data-pid="reply.pid" />
        <div class="d-inline-flex gap-1 fs-5">
            <span class="badge bg-secondary user-select-all">{{ reply.floor }}楼</span>
            <span v-if="reply.subReplyCount > 0" class="badge bg-info user-select-all">
                {{ reply.subReplyCount }}条<FontAwesome :icon="faCommentDots" />
            </span>
            <!-- TODO: implement these reply's property
                <span>fold:{{ reply.isFold }}</span>
                <span>{{ reply.agree }}</span>
                <span>{{ reply.sign }}</span>
                <span>{{ reply.tail }}</span>
            -->
        </div>
        <div class="float-end d-inline-flex align-items-center gap-1 badge bg-light fs-6 p-1 pe-2" role="group">
            <PostBadgeCommon :post="reply" postIDKey="pid" postTypeText="回复帖" />
            <PostBadgeTime
                postType="回复帖"
                currentPostIDKey="pid" parentPostIDKey="tid" :parentPost="thread"
                postTimeKey="postedAt" timestampType="发帖时间"
                :previousPost="previousReply" :currentPost="reply" :nextPost="nextReply"
                class="bg-primary" />
        </div>
    </header>
    <div
        :ref="replyElementRefs.set"
        class="reply row pe-0 shadow-sm bs-callout bs-callout-info">
        <address
            v-for="author in [getUser(reply.authorUid)]" :key="author.uid"
            class="reply-author col-auto h-100 text-center sticky-top shadow-sm badge bg-light">
            <NuxtLink :to="toUserRoute(author.uid)" noPrefetch class="d-block">
                <UserPortrait :user="author" size="large" />
                <p v-if="author.name !== null" class="mb-0">{{ author.name }}</p>
                <p v-if="author.displayName !== null">{{ author.displayName }}</p>
            </NuxtLink>
            <PostBadgeUser :user="getUser(reply.authorUid)" :threadAuthorUid="thread.authorUid" />
        </address>
        <div class="col d-flex flex-column gap-2 border-start overflow-auto">
            <PostRendererContent :content="reply.content" class="reply-content" />
            <div v-if="reply.subReplies.length > 0" class="sub-replies d-flex flex-column gap-2">
                <PostRendererListSubReply
                    v-for="(subReplyGroup, index) in reply.subReplies" :key="index"
                    :previousSubReplyGroup="reply.subReplies[index - 1]" :subReplyGroup="subReplyGroup"
                    :nextSubReplyGroup="reply.subReplies[index + 1]" :thread="thread" :reply="reply" />
            </div>
        </div>
    </div>
</article>
</template>

<script setup lang="ts">
import '@/assets/css/bootstrapCallout.css';
import type { TemplateRefsList } from '@vueuse/core';
import { faCommentDots } from '@fortawesome/free-solid-svg-icons';

type ReplyWithGroupedSubReplies = ArrayElement<ThreadWithGroupedSubReplies['replies']>;
const { reply } = defineProps<{
    thread: ThreadWithGroupedSubReplies,
    previousReply?: ReplyWithGroupedSubReplies,
    reply: ReplyWithGroupedSubReplies,
    nextReply?: ReplyWithGroupedSubReplies,
    replyElementRefs: TemplateRefsList<HTMLElement | null>
}>();
const highlightPostStore = useHighlightPostStore();
const { getUser, currentCursor } = usePostPageProvision().inject();
const viewportTopmostPostStore = useViewportTopmostPostStore();
const { stickyTitleEl } = await viewportTopmostPostStore.observe(
    { cursor: currentCursor.value, tid: reply.tid, pid: reply.pid },
    replyTitleStyle.insetBlockStart.px
);
</script>

<style scoped>
.reply-title {
    z-index: 1019;
    inset-block-start: v-bind('replyTitleStyle.insetBlockStart.remString');
    margin-block-start: v-bind('replyTitleStyle.marginBlockStart.remString');
    border-block-start: 1px solid #ededed;
    border-block-end: 0;
    background-color: #0000;
    background-image: linear-gradient(rgb(237 237 237 / 100%), rgb(237 237 237 / 10%));
    /* https://stackoverflow.com/questions/25308823/targeting-positionsticky-elements-that-are-currently-in-a-stuck-state/79471060#79471060 */
    container: reply-title / scroll-state;
}
.reply-title.highlight-post {
    background-image: none !important;
}
.reply {
    padding: .625rem;
    border-block-start: 0;
    content-visibility: auto;
    --sub-reply-group-count: 0;
    --predicted-media-height: 0px;
    --predicted-reply-content-height: 0px;
    --predicted-sub-reply-content-height: 0px;
    contain-intrinsic-block-size: auto max(
        11rem,
        (var(--sub-reply-group-count) * 4rem)
            + var(--predicted-media-height)
            + var(--predicted-reply-content-height)
            + var(--predicted-sub-reply-content-height)
    );
}
.reply-author {
    z-index: 1018;
    inset-block-start: 8rem;
    padding: .25rem;
    font-size: 1rem;
    line-height: 150%;
}
.sub-replies {
    margin-inline-start: .5rem;
}

/*
 * selecting children as a workaround to selectors in container query can only select children of the container that has set `container-type`
 * https://stackoverflow.com/questions/74602394/container-queries-why-cant-i-style-the-container-selector-in-the-container-que
 * https://github.com/w3c/csswg-drafts/issues/5979#issuecomment-2597218725
 */
.not-match-query-reply :is(.reply-title > *, .reply-author, .reply-content) {
    opacity: .5;
}
:is(.not-match-query-reply:hover, .not-match-query-reply.viewport-topmost-post) :is(.reply-title > *, .reply-author, .reply-content) {
    opacity: unset;
}
@media (prefers-reduced-transparency) {
    .not-match-query-reply :is(.reply-title > *, .reply-author, .reply-content) {
        opacity: unset;
    }
}

@container reply-title scroll-state(stuck: block-start) {
    .reply-title > * {
        opacity: unset !important;
    }
    .sticky-stuck-indicator {
        --is-stuck: 'true';
    }
}
@container reply-title scroll-state(stuck: none) {
    .sticky-stuck-indicator {
        --is-stuck: 'false';
    }
}
</style>
