<script setup lang="ts">
//
import * as CH from '~/components/pub/my-ui/content-header'

//
import PRSwitcher from '~/components/app/procedure-room/switcher.vue'

import PRMultiOptPicker  from '~/components/app/procedure-room/multi-opt-picker.vue'
import PRSingleOptPicker  from '~/components/app/procedure-room/single-opt-picker.vue'

// Material Package & Item
import type { MaterialPackageItem } from '~/models/material-package-item'
import { getValueLabelList } from '~/services/material-package.service'
import { getList as getMaterialPackageItemList } from '~/services/material-package-item.service'
import MPSwitcher from '~/components/app/material-package/switcher.vue'
import MPIQuickList from '~/components/app/material-package-item/quick-list.vue'

const vFn = () => {} // Void function
const headerConfig: CH.Config = {
  title: 'Order Ruang Tindakan',
  icon: 'i-lucide-box',
}

const procedureRoomType = ref('procedure')
watch(procedureRoomType, async (newValue) => {
  
})
const materialPackageItems = await getValueLabelList()
const selectedMaterialPackage = ref('')

const materialPackageItemList = ref<MaterialPackageItem[]>([])
watch(selectedMaterialPackage, async (newValue) => {
  const res = await getMaterialPackageItemList({ 'material-package-code': newValue, includes: 'material' })
  if (res.success) {
    materialPackageItemList.value = res.body.data
  }
})
</script>

<template>
  <CH.ContentHeader v-bind="headerConfig" />

  <Separator class="mb-4" />

  <PRSwitcher v-model="procedureRoomType" />

  <PRMultiOptPicker v-if="procedureRoomType == 'procedure'" />

  <PRSingleOptPicker v-else />

  <MPSwitcher :items="materialPackageItems" v-model="selectedMaterialPackage" />

  <MPIQuickList :data="materialPackageItemList" />
</template>
