<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry'
import Separator from '~/components/pub/ui/separator/Separator.vue'
import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'

import { bigTimeUnitCodes } from '~/lib/constants'

import type { PrescriptionItem } from '~/models/prescription-item'

const props = defineProps<{
  data: PrescriptionItem
}>()

type ClickType = 'close' | 'save'
type Item = {
  value: string
  label: string
}

const bigTimeUnitCodeItems: Item[] = []

if(!props.data.intervalUnit_code) {
  props.data.intervalUnit_code = 'day'
}

Object.keys(bigTimeUnitCodes).forEach((key) => {
  bigTimeUnitCodeItems.push({
    value: key,
    label: bigTimeUnitCodes[key] || '',
  })
})


const emit = defineEmits<{
  close: [],
  save: [data: PrescriptionItem],
}>()

function navClick(type: ClickType) {
  if (type === 'close') {
    emit('close')
  } else if (type === 'save') {
    emit('save', props.data)
  }
}
</script>

<template>
  <DE.Block :colCount="5" :cellFlex="false">
    <DE.Cell :colSpan="5">
        <DE.Label>Nama</DE.Label>
        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label>Frequensi</DE.Label>
      <DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label>Dosis</DE.Label>
      <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
    </DE.Cell>
    <DE.Cell>
        <DE.Label>Sediaan</DE.Label>
        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label>Interval</DE.Label>
      <DE.Field>
        <Select
          v-model="data.intervalUnit_code"
          :items="bigTimeUnitCodeItems"
        />
      </DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label>Total</DE.Label>
      <DE.Field>
        <Input v-model="data.quantity" />
      </DE.Field>
    </DE.Cell>
    <DE.Cell :colSpan="5">
        <DE.Label>Cara Pakai</DE.Label>
        <DE.Field><Input /></DE.Field>
    </DE.Cell>
  </DE.Block>
  <Separator class="my-5" />
  <div class="flex justify-center">
    <Nav @click="navClick" />
  </div>
</template>
