<script setup lang="ts">
import TanView from '@/components/TanView.vue'
import ColumnBody from '@/components/layout/ColumnBody.vue'
import ThreeColumn from '@/components/layout/ThreeColumn.vue'
import TicketDisplay from '@/components/ticket/TicketDisplay.vue'
import TicketList from '@/components/ticket/TicketList.vue'

import { useQuery } from '@tanstack/vue-query'
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'

import { useAPI } from '@/api'
import type { Type } from '@/client/models'

const api = useAPI()

const route = useRoute()

const id = computed(() => route.params.id as string)
const type = computed(() => route.params.type as string)

const {
  isPending,
  isError,
  data: selectedType,
  error,
  refetch
} = useQuery({
  queryKey: ['types', type.value],
  queryFn: (): Promise<Type> => {
    return api.getType({ id: type.value })
  }
})

watch(
  () => type.value,
  () => refetch()
)
</script>

<template>
  <ThreeColumn :show-details="!!id">
    <template #list>
      <TanView :isError="isError" :isPending="isPending" :error="error">
        <TicketList v-if="selectedType" :key="selectedType.id" :selectedType="selectedType" />
      </TanView>
    </template>
    <template #single>
      <TanView :isError="isError" :isPending="isPending" :error="error">
        <ColumnBody v-if="!id" class="items-center justify-center text-lg text-gray-500">
          No ticket selected
        </ColumnBody>
        <TicketDisplay v-else-if="selectedType" :key="id" :selectedType="selectedType" />
      </TanView>
    </template>
  </ThreeColumn>
</template>
