<template>
    <div class="tdflqwzn" :class="{ isMe }">
        <XReaction
            v-for="r in note.reactions"
            :key="magReactionToLegacy(r[0])"
            :reaction="r[0]"
            :count="r[1]"
            :is-initial="initialReactions.has(magReactionToLegacy(r[0]))"
            :note="note"
        />
    </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { $i } from "@/account";
import XReaction from "@/components/MkReactionsViewer.reaction.vue";
import { packed } from "magnetar-common";
import {
    magConvertReaction,
    magReactionToLegacy,
} from "@/scripts-mag/mag-util";

const props = defineProps<{
    note: packed.PackNoteMaybeFull;
}>();

const initialReactions = new Set(
    Array.isArray(props.note.reactions)
        ? props.note.reactions.map((v) => magReactionToLegacy(v[0]))
        : Object.keys(props.note.reactions)
              .map((v) => magConvertReaction(v))
              .map(magReactionToLegacy),
);

const isMe = computed(() => $i && $i.id === props.note.user.id);
</script>

<style lang="scss" scoped>
.tdflqwzn {
    margin-inline: -2px;
    margin-top: 0.2em;
    width: 100%;

    &:empty {
        display: none;
    }

    &.isMe {
        > span {
            cursor: default !important;
        }
    }
}
</style>
