<template>
    <MkStickyContainer>
        <template #header
            ><MkPageHeader :actions="headerActions" :tabs="headerTabs"
        /></template>
        <MkSpacer :content-max="1000">
            <transition name="fade" mode="out-in">
                <div v-if="user">
                    <XFollowList :user="user" type="following" />
                </div>
                <MkError v-else-if="error" @retry="fetchUser()" />
                <MkLoading v-else />
            </transition>
        </MkSpacer>
    </MkStickyContainer>
</template>

<script lang="ts" setup>
import { computed, watch, ref } from "vue";
import XFollowList from "./follow-list.vue";
import * as os from "@/os";
import { definePageMetadata } from "@/scripts/page-metadata";
import { i18n } from "@/i18n";
import { endpoints, packed } from "magnetar-common";

const props = withDefaults(
    defineProps<{
        acct: string;
    }>(),
    {},
);

let user = ref<null | packed.PackUserBase>(null);
let error = ref(null);

function fetchUser(): void {
    if (!props.acct) return;
    user.value = null;

    os.magApi(endpoints.GetUserByAcct, {}, { user_acct: props.acct })
        .then((u) => {
            user.value = u;
        })
        .catch((err) => {
            error.value = err;
        });
}

watch(() => props.acct, fetchUser, {
    immediate: true,
});

const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata(
    computed(() =>
        user.value
            ? {
                  icon: "ph-user ph-bold ph-lg",
                  title: `${user.value.display_name} (@${user.value.username})`,
                  subtitle: i18n.ts.following,
                  userName: user.value,
                  avatar: user.value,
              }
            : null,
    ),
);
</script>

<style lang="scss" scoped></style>
