<script setup lang="ts">
import mockData from './sample'

// types
import { type ActionReportFormData } from '~/schemas/action-report.schema'
import { type Encounter } from '~/models/encounter'

// Components
import AppActionReportPreview from '~/components/app/action-report/preview.vue'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'

// #region Props & Emits
const router = useRouter()
const { backToList, goToEntry } = useQueryCRUDMode('mode')
const { recordId } = useQueryCRUDRecordId('record-id')

function onEditFromView() {
  goToEntry({ fromView: true })
}

const props = defineProps<{
  encounter: Encounter
}>()

// #endregion

// #region State & Computed
const reportData = ref<ActionReportFormData | null>(null)

const headerPrep: HeaderPrep = {
  title: 'Detail Laporan Tindakan',
  icon: 'i-lucide-stethoscope',
}

// #endregion

// #region Lifecycle Hooks
onMounted(async () => {
  reportData.value = mockData as unknown as ActionReportFormData
})
// #endregion

// #region Functions
// #endregion region

// #region Utilities & event handlers
function onEdit() {
  router.push({
    name: 'action-report-id-edit',
    params: { id: 100 },
  })
}
function onBack() {}
// #endregion

// #region Watchers
// #endregion
</script>

<template>
  <AppActionReportPreview
    v-if="reportData"
    :data="reportData"
    @back="backToList"
    @edit="onEditFromView"
  />
</template>
