<template>
    <MkPagination ref="pagingComponent" :pagination="pagination">
        <template #empty>
            <div class="_fullinfo">
                <img
                    src="/static-assets/badges/info.png"
                    class="_ghost"
                    alt="Info"
                />
                <div>{{ i18n.ts.noNotes }}</div>
            </div>
        </template>

        <template #default="{ items: notes }">
            <div class="giivymft" :class="{ noGap }">
                <XList
                    ref="notes"
                    v-slot="{ item: note }: { item: Misskey.entities.Note }"
                    :items="notes"
                    :direction="pagination.reversed ? 'up' : 'down'"
                    :reversed="pagination.reversed"
                    :no-gap="noGap"
                    class="notes"
                >
                    <XNoteResolvingProxy
                        :key="note._featuredId_ || note._prId_ || note.id"
                        class="qtqtichx"
                        :note="noteIsMag(note) ? note : note.id"
                    />
                </XList>
            </div>
        </template>
    </MkPagination>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Paging } from "@/components/MkPagination.vue";
import MkPagination from "@/components/MkPagination.vue";
import XNoteResolvingProxy from "@/components/MagNoteResolvingProxy.vue";
import XList from "@/components/MagDateSeparatedList.vue";
import { i18n } from "@/i18n";
import { noteIsMag } from "@/scripts-mag/mag-util";
import type * as Misskey from "calckey-js";

defineProps<{
    pagination: Paging;
    noGap?: boolean;
}>();

const pagingComponent = ref<InstanceType<typeof MkPagination>>();

defineExpose({
    pagingComponent,
});
</script>

<style lang="scss" scoped>
.giivymft {
    &.noGap {
        > .notes {
            background: var(--panel) !important;
            border-radius: var(--radius);
        }
    }
    &:not(.noGap) {
        > .notes {
            .qtqtichx {
                background: var(--panel);
                border-radius: var(--radius);
            }
        }
    }
}
</style>
