<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import useSWRV from "swrv";
import type Activity from "@/lib/api/entities/activity";
import apiFetch from "@/lib/api-fetch";

import { FwbSpinner } from "flowbite-vue";
import VulStatus from "@/components/status/VulStatus.vue";

const router = useRouter();
const route = useRoute();
const username = ref(route.params.username);
const statusId = ref(route.params.statusId);

const { data, error } = useSWRV(() => `/api/v1/statuses/${statusId.value}`, apiFetch<Activity>);

watch(
	() => [route.params.username, route.params.statusId],
	([newUsername, newId]) => {
		username.value = newUsername as string;
		statusId.value = newId as string;
	},
);

watch(
	() => ({ activity: data.value, username: route.params.username }),
	({ activity, username }) => {
		if (activity && activity.account.acct !== username) {
			router.push({
				name: "user-status",
				params: { username: activity.account.acct, statusId: activity.id },
			});
		}
	},
);
</script>
<template>
	<div v-if="error">Failed to load: {{ error }}</div>
	<FwbSpinner v-else-if="!data" size="10" />
	<VulStatus v-else :status="data" />
</template>
