<template>
    <div class="civpbkhh">
        <div
            ref="scroll"
            class="scrollbox"
            v-bind:class="{ scroll: isScrolling }"
        >
            <div v-for="note in notes" class="note">
                <div class="content _panel" v-if="note.cw == null">
                    <div class="body">
                        <MkA
                            v-if="note.parent_note_id"
                            class="reply"
                            :to="`/notes/${note.parent_note_id}`"
                            ><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
                        ></MkA>
                        <Mfm
                            v-if="note.text"
                            :text="note.text"
                            :author="note.user"
                            :i="$i"
                            :custom-emojis="note.emojis"
                        />
                        <!-- <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> -->
                    </div>
                    <div
                        v-if="note.attachments?.length > 0"
                        class="richcontent"
                    >
                        <XMediaList :media-list="note.attachments!" />
                    </div>
                    <div v-if="note.poll">
                        <XPoll :note="note" :readOnly="true" />
                    </div>
                </div>
                <XReactionsViewer ref="reactionsViewer" :note="note" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
import XMediaList from "@/components/MkMediaList.vue";
import XPoll from "@/components/MagPoll.vue";
import * as os from "@/os";
import { packed } from "magnetar-common";
import { resolveNote } from "@/scripts-mag/mag-util";
import { $i } from "@/account";

export default defineComponent({
    computed: {
        $i() {
            return $i;
        },
    },
    components: {
        XReactionsViewer,
        XMediaList,
        XPoll,
    },

    data() {
        return {
            notes: [] as packed.PackNoteMaybeFull[],
            isScrolling: false,
        };
    },

    created() {
        os.api("notes/featured").then(async (notes) => {
            this.notes = await Promise.all(notes.map(resolveNote));
        });
    },

    updated() {
        if (this.$refs.scroll.clientHeight > window.innerHeight) {
            this.isScrolling = true;
        }
    },
});
</script>

<style lang="scss" scoped>
@keyframes scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    5% {
        transform: translate3d(0, 0, 0);
    }
    75% {
        transform: translate3d(0, calc(-100% + 90vh), 0);
    }
    90% {
        transform: translate3d(0, calc(-100% + 90vh), 0);
    }
}

.civpbkhh {
    text-align: right;

    > .scrollbox {
        &.scroll {
            animation: scroll 45s linear infinite;
        }

        > .note {
            margin: 16px 0 16px auto;

            > .content {
                padding: 16px;
                margin: 0 0 0 auto;
                max-width: max-content;
                border-radius: 16px;

                > .richcontent {
                    min-width: 250px;
                }
            }
        }
    }
}
</style>
