<script setup lang="ts">
import { watch } from 'vue'
import { KbxExcelImport, KbxImportPage, useKbxImportProgress } from '@kbx/ui'
import { orderImportDefinition, orderImportScreen } from './order-import.definition'
import { useOrderExcelImport } from './useOrderExcelImport'
import { createImportProgressConnection } from '../../../../imports/createImportProgressConnection'

const vm = useOrderExcelImport()
const realtime = useKbxImportProgress(createImportProgressConnection())
watch(vm.sessionId, id => { if (id) void realtime.watch(id) })
</script>

<template>
  <KbxImportPage :screen="orderImportScreen" :refreshing="vm.busy.value" :problem="vm.problem.value" @retry-problem="vm.retryProblem" @dismiss-problem="vm.dismissProblem">
      <KbxExcelImport
        :definition="orderImportDefinition"
        :session="vm.session.value"
        :busy="vm.busy.value"
        :progress="realtime.lastEvent.value"
        @upload="vm.upload"
        @save-mapping="vm.saveMapping"
        @save-named-mapping="vm.saveNamedMapping"
        @validate="vm.validate"
        @commit="vm.commit"
        @download-template="vm.downloadTemplate"
        @download-errors="vm.downloadErrors"
        @cancel="vm.reset"
      />
  </KbxImportPage>
</template>
