<template>
<div v-viewer>
    <!-- eslint-disable-next-line vue/no-unused-vars -->
    <DefineUGCImage v-slot="{ $slots, src, ...attrs }">
        <NuxtLink v-if="hydrationStore.isHydratingOrSSR" :to="src" target="_blank">
            <img
                :src="src" :referrerpolicy="tiebaImageReferrerPolicy"
                loading="lazy" class="tieba-ugc-media tieba-ugc-image" v-bind="attrs" />
        </NuxtLink>
        <img
            v-else :src="src" :referrerpolicy="tiebaImageReferrerPolicy"
            loading="lazy" class="tieba-ugc-media tieba-ugc-image" v-bind="attrs" />
    </DefineUGCImage>
    <div v-for="(i, index) in content" :key="index" class="post-content-item">
        <span v-if="i.type === undefined || i.type === 40" class="post-content-item-text">{{ i.text }}</span>
        <NuxtLink
            v-if="i.type === 1 || i.type === 18"
            :to="tryExtractTiebaOutboundUrl(i.link)" target="_blank">
            {{ i.text }}
        </NuxtLink>
        <img
            v-if="i.type === 2" :src="toTiebaEmoticonUrl(i.text)" :alt="i.c"
            :referrerpolicy="tiebaImageReferrerPolicy" loading="lazy" />
        <ReuseUGCImage v-if="i.type === 3" :src="toTiebaImageUrl(i.originSrc)" />
        <NuxtLink
            v-if="i.type === 4"
            :to="toUserProfileUrl({ name: _.trimStart(i.text, '@') })"
            target="_blank">
            {{ i.text }}
        </NuxtLink>
        <template v-if="i.type === 5">
            <template v-if="i.src !== undefined">
                <!-- todo: fix anti hotlinking on `i.link`: http://tb-video.bdstatic.com/tieba-smallvideo-transcode-crf -->
                <video
                    :poster="toTiebaImageUrl(extractTiebaImageFilename(i.src))" :src="toHTTPS(i.link)"
                    preload="metadata" controls class="tieba-ugc-media" />
                <br />
                <NuxtLink :to="i.text" target="_blank">贴吧视频播放页</NuxtLink>
            </template>
            <template v-else>
                <NuxtLink :to="i.text" target="_blank">[[外站视频：{{ i.text }}]]</NuxtLink>
            </template>
        </template>
        <br v-if="i.type === 7" />
        <span v-if="i.type === 9">{{ i.text }}</span>
        <span v-if="i.type === 10">
            <!-- TODO: fill with voice player and play source url -->
            [[语音 {{ i.voiceMd5 }} 时长:{{ i.duringTime }}s]]
        </span>
        <img
            v-if="i.type === 11" :src="toHTTPS(i.dynamic)" :alt="i.c"
            :referrerpolicy="tiebaImageReferrerPolicy" loading="lazy" class="d-block" />
        <ReuseUGCImage v-if="i.type === 16" :src="toHTTPS(i.graffitiInfo?.url)" alt="贴吧涂鸦" />
        <NuxtLink v-if="i.type === 20" :to="i.memeInfo?.detailLink" target="_blank">
            <ReuseUGCImage v-if="i.type === 20" :src="toHTTPS(i.src)" />
        </NuxtLink>
    </div>
</div>
</template>

<script setup lang="ts">
import type { ImgHTMLAttributes } from 'vue';
import _ from 'lodash';

defineProps<{ content: PostContent | null }>();
const tiebaImageReferrerPolicy = undefinedWhenEmpty(useRuntimeConfig().public
    .tiebaImageReferrerPolicy as ImgHTMLAttributes['referrerpolicy']);
const [DefineUGCImage, ReuseUGCImage] = createReusableTemplate<{ src?: string }>({ inheritAttrs: false });
const hydrationStore = useHydrationStore();
useViewerStore().enable();
</script>

<style scoped>
.tieba-ugc-media {
    max-inline-size: v-bind('tiebaUGCMediaMaxSize.remString');
    max-block-size: v-bind('tiebaUGCMediaMaxSize.remString');
    object-fit: contain;
    margin: .25rem;
}
.tieba-ugc-image {
    cursor: zoom-in;
}

/* https://stackoverflow.com/questions/29732575/how-to-specify-line-breaks-in-a-multi-line-flexbox-layout/29733127#29733127 */
.post-content-item {
    display: contents;
}
/* https://stackoverflow.com/questions/18189147/selecting-an-element-that-doesnt-have-a-child-with-a-certain-class */
.post-content-item:not(:has(.tieba-ugc-image)):has(+ .post-content-item .tieba-ugc-image)::after,
/* allow mupltie continuous `.post-content-item .tieba-ugc-image` to not wrap */
.post-content-item:has(.tieba-ugc-image):not(:has(+ .post-content-item .tieba-ugc-image))::after {
    content: '';
    display: block;
}

.post-content-item-text {
    white-space: pre-wrap;
}
</style>
