<template>
    <XNote
        v-if="noteData"
        :note="noteData"
        :collapsed-reply="collapsedReply"
        :detailed-view="detailedView"
        :pinned="pinned"
    >
    </XNote>
    <div v-else>
        <i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import XNote from "@/components/MagNote.vue";
import { packed } from "magnetar-common";
import { resolveNote } from "@/scripts-mag/mag-util";

const props = defineProps<{
    note: packed.PackNoteMaybeFull | string;
    pinned?: boolean;
    detailedView?: boolean;
    collapsedReply?: boolean;
}>();

let noteData = ref<packed.PackNoteMaybeFull | null>(null);

watch(
    () => props.note,
    (val) => {
        if (typeof val !== "string") {
            noteData.value = val;
            return;
        }

        resolveNote({ id: val }).then((n) => {
            noteData.value = n;
        });
    },
    { immediate: true },
);
</script>
