<template>
    <div>
        <MagPagination
            ref="list"
            :pagination="
                type === 'following' ? followingPagination : followersPagination
            "
            class="mk-following-or-followers"
        >
            <template #items="{ items: users }">
                <div class="users">
                    <MkUserInfo
                        v-for="user in users as typeof endpoints.GetFollowingById.response"
                        :key="user.id"
                        class="user"
                        :user="user"
                    />
                </div>
            </template>
        </MagPagination>
    </div>
</template>

<script lang="ts" setup>
import MkUserInfo from "@/components/MkUserInfo.vue";
import { endpoints, packed } from "magnetar-common";
import MagPagination, { Paging } from "@/components/MagPagination.vue";
import { reactive, watch } from "vue";

const props = defineProps<{
    user: packed.PackUserBase;
    type: "following" | "followers";
}>();

const followingPagination: Paging<typeof endpoints.GetFollowingById> = reactive(
    {
        endpoint: endpoints.GetFollowingById,
        limit: 20,
        pathParams: {
            id: props.user.id,
        },
        params: {},
    },
);

const followersPagination: Paging<typeof endpoints.GetFollowersById> = reactive(
    {
        endpoint: endpoints.GetFollowersById,
        limit: 20,
        pathParams: {
            id: props.user.id,
        },
        params: {},
    },
);

watch(
    () => props.user.id,
    (val) => {
        followingPagination.pathParams.id = val;
        followersPagination.pathParams.id = val;
    },
);
</script>

<style lang="scss" scoped>
.mk-following-or-followers {
    > .users {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        grid-gap: var(--margin);
    }
}
</style>
