<script setup lang="ts">
import { LucidePlus } from 'lucide-vue-next';

import * as DE from '~/components/pub/my-ui/doc-entry'
import Separator from '~/components/pub/ui/separator/Separator.vue';
import * as Table from '~/components/pub/ui/table'
import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'


import { genBase } from '~/models/_base';
import { genMedicine } from '~/models/medicine';
import type { MedicinemixItem } from '~/models/medicinemix-item';
import type { PrescriptionItem } from '~/models/prescription-item';

const props = defineProps<{
  data: PrescriptionItem
  items: MedicinemixItem[]
}>()

type ClickType = 'close' | 'save'

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

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

function addItem() {
  props.items.push({
    ...genBase(),
    medicineMix_id: 0,
    medicine_id: 0,
    medicine: genMedicine(),
    dose: 0,
    uom_code: '',
  })
}
</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 v-model="data.frequency" /></DE.Field>
    </DE.Cell>
    <DE.Cell>
        <DE.Label>Dosis</DE.Label>
        <DE.Field><Input v-model="data.dose" /></DE.Field>
    </DE.Cell>
    <DE.Cell>
        <DE.Label>Sediaan</DE.Label>
        <DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
    </DE.Cell>
    <DE.Cell>
        <DE.Label>Total</DE.Label>
        <DE.Field><Input /></DE.Field>
    </DE.Cell>
    <DE.Cell :colSpan="5">
        <DE.Label>Cara Pakai</DE.Label>
        <DE.Field><Input /></DE.Field>
    </DE.Cell>
  </DE.Block>
  <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
  <Table.Table class="border mb-3 2xl:mb-4">
    <Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
      <Table.TableRow>
        <Table.TableHead>Nama</Table.TableHead>
        <Table.TableHead class="w-24">Dosis</Table.TableHead>
        <Table.TableHead class="w-24">Satuan</Table.TableHead>
        <Table.TableHead class="w-20">..</Table.TableHead>
      </Table.TableRow>
    </Table.TableHeader>
    <Table.TableBody class="[&_td]:p-0.6">
      <Table.TableRow v-if="items.length > 0" v-for="item in items">
        <Table.TableCell>
          <Input v-model="item.medicine.name" />
        </Table.TableCell>
        <Table.TableCell>
          <Input v-model="item.dose" />
        </Table.TableCell>
        <Table.TableCell>
          <Input />
        </Table.TableCell>
      </Table.TableRow>
      <Table.TableRow v-else>
        <Table.TableCell colspan="4" class="!p-5 text-center">
          Belum ada data
        </Table.TableCell>
      </Table.TableRow>
    </Table.TableBody>
  </Table.Table>
  <div>
    <Button @click="addItem">
      <LucidePlus />
      Tambah
    </Button>
  </div>
  <Separator class="my-5" />
  <div class="flex justify-center">
    <Nav @click="navClick" />
  </div>
</template>
