<template>
  <UDashboardPanel id="home">
    <template #header>
      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UDropdownMenu :items="items">
            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
          </UDropdownMenu>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left> toolbar left </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
        <div
          v-for="(applicationFormElem, index) in applicationForms"
          :key="applicationFormElem.id"
          class="flex justify-between items-center p-4 bg-white rounded-lg shadow-md"
          @click="navigateTo(`application-forms/${applicationFormElem.id}`)"
        >
          <div>
            <p class="font-medium text-(--ui-text-highlighted) text-base">
              #{{ index }} {{ applicationFormElem.name }}
            </p>
            <p class="text-(--ui-text-muted) text-sm">
              Zuletzt bearbeitet: {{ formatDate(applicationFormElem.modifiedAt) }}
            </p>
            <p class="text-(--ui-text-muted) text-sm">Erstellt: {{ formatDate(applicationFormElem.createdAt) }}</p>
          </div>
          <div>
            <UPageLinks :links="getLinksForApplicationForm(applicationFormElem)" />
          </div>
        </div>
      </div>
    </template>
    <DeleteModal
      v-if="isDeleteModalOpen && applicationFormNameToDelete"
      v-model:is-open="isDeleteModalOpen"
      :application-form-to-delete="applicationFormNameToDelete"
      @delete="deleteApplicationForm($event)"
    />
  </UDashboardPanel>
</template>

<script setup lang="ts">
import type { ApplicationFormDto, PagedApplicationFormDto } from '~/.api-client'
const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm()
const route = useRoute()

const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
  return await getAllApplicationForms()
})

const isDeleteModalOpen = computed<boolean>({
  get: () => 'delete' in route.query,
  set: (isOpen: boolean) => {
    if (isOpen) return
    navigateTo({ path: route.path, query: {} })
  }
})

const applicationFormNameToDelete = computed(() => {
  return data?.value?.content.find((appForm) => appForm.id === route.query.id)
})

const items = [
  [
    {
      label: 'Neuer Mitbestimmungsantrag',
      icon: 'i-lucide-send',
      to: '/create'
    }
  ]
]

const applicationForms = computed({
  get: () => data?.value?.content ?? [],
  set: (val) => {
    if (val && data.value) {
      data.value.content = val
    }
  }
})

function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
  return [
    {
      label: 'Bearbeiten',
      icon: 'i-lucide-file-pen',
      to: `/application-forms/${applicationForm.id}`
    },
    {
      label: 'Löschen',
      icon: 'i-lucide-trash',
      to: `?delete&id=${applicationForm.id}`
    }
  ]
}

async function deleteApplicationForm(applicationFormId: string) {
  await deleteApplicationFormById(applicationFormId)
  data.value?.content.splice(
    data.value?.content.findIndex((appForm) => appForm.id === applicationFormId),
    1
  )
  isDeleteModalOpen.value = false
}
</script>
