<script setup lang="ts">
import type { KbxAsyncState, KbxProblem, KbxScreenDefinition, KbxSummaryItem, KbxTemplateContext, KbxWorkQueueCounter } from '@kbx/contracts'
import KbxQueuePage from './KbxQueuePage.vue'

withDefaults(defineProps<{
  screen:KbxScreenDefinition
  selectionCount?:number
  can?:(permission:string)=>boolean
  breadcrumb?:string
  context?:KbxTemplateContext|null
  contentState?:KbxAsyncState
  refreshing?:boolean
  errorRetryable?:boolean
  summaryItems?:KbxSummaryItem[]
  exceptionCounters?:KbxWorkQueueCounter[]
  activeExceptionKey?:string|null
  problem?:KbxProblem|null
  problemActionAllowlist?:readonly string[]
}>(), { context:null, contentState:'ready', refreshing:false, errorRetryable:true, summaryItems:()=>[], exceptionCounters:()=>[], activeExceptionKey:null, problem:null, problemActionAllowlist:()=>[] })
const emit=defineEmits<{ command:[string]; exceptionFilter:[string|null]; problemAction:[string]; retryProblem:[]; dismissProblem:[] }>()
</script>

<template>
  <KbxQueuePage :screen="screen" :selection-count="selectionCount" :can="can" :breadcrumb="breadcrumb" :context="context" :content-state="contentState" :refreshing="refreshing" :error-retryable="errorRetryable" :summary-items="summaryItems" :exception-counters="exceptionCounters" :active-exception-key="activeExceptionKey" :problem="problem" :problem-action-allowlist="problemActionAllowlist" @command="emit('command',$event)" @exception-filter="emit('exceptionFilter',$event)" @problem-action="emit('problemAction',$event)" @retry-problem="emit('retryProblem')" @dismiss-problem="emit('dismissProblem')">
    <template v-if="$slots.utility" #utility><slot name="utility" /></template>
    <template v-if="$slots.notice" #notice><slot name="notice" /></template>
    <template v-if="$slots.search" #search><slot name="search" /></template>
    <template v-if="$slots['queue-summary'] || $slots.summary" #summary><slot name="queue-summary"><slot name="summary" /></slot></template>
    <template v-if="$slots.exceptions" #exceptions><slot name="exceptions" /></template>
    <template v-if="$slots.contextual" #contextual><slot name="contextual" /></template>
    <template #content><slot name="content" /></template>
    <template v-if="$slots.footer" #footer><slot name="footer" /></template>
    <template v-if="$slots.detail" #detail><slot name="detail" /></template>
  </KbxQueuePage>
</template>
