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

// This scope
import type { DeviceOrderItem } from '~/models/device-order-item';
import type { Device } from '~/models/device';

// Props
const props = defineProps<{
  data: DeviceOrderItem
  devices: Device[]
}>()

// Refs
const { devices } = toRefs(props)
const deviceItems = ref<CB.Item[]>([])

// Nav actions
type ClickType = 'close' | 'save'

// Emits
const emit = defineEmits<{
  close: [],
  save: [data: DeviceOrderItem],
  'update:searchText': [value: string]
}>()

// Reactivities
watch(devices, (data) => {
  deviceItems.value = CB.objectsToItems(data, 'code', 'name')
})

// Functions
function searchDeviceText(value: string) {
  emit('update:searchText', value)
}

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

<template>
  <DE.Block :colCount="4" :cellFlex="false">
    <DE.Cell :colSpan="4">
      <DE.Label>Nama</DE.Label>
      <DE.Field>
        <CB.Combobox
          v-model="data.device_code"
          :items="deviceItems"
          @update:searchText="searchDeviceText"
        />
      </DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label>Jumlah</DE.Label>
      <DE.Field>
        <Input v-model="data.quantity" type="number" />
      </DE.Field>
    </DE.Cell>
  </DE.Block>
  <Separator class="my-5" />
  <div class="flex justify-center">
    <Nav @click="navClick" />
  </div>
</template>