<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <UDashboardPanel id="versions">
    <template #header>
      <UDashboardNavbar :title="`Versionen: ${applicationForm?.name}`">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="p-6">
        <VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" :current-form="applicationForm" @restored="handleRestored" />
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const toast = useToast()

definePageMeta({
  key: (route) => `${route.params.id}-versions`
})

const applicationFormId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
const { applicationForm, navigationLinks: links, refresh } = await useApplicationFormNavigation(applicationFormId!)

async function handleRestored() {
  await refresh()
  toast.add({
    title: 'Version wiederhergestellt',
    description: 'Das Formular wurde auf die ausgewählte Version zurückgesetzt.',
    color: 'success'
  })
  router.push(`/application-forms/${applicationForm.value.id}/0`)
}
</script>
