<script setup lang="ts">
import type { McuSrc } from '~/models/mcu-src';
import type { McuOrderItem } from '~/models/mcu-order-item';

const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
defineProps<{
  dataSource: McuSrc[]
  // data: number[]
}>()

const emit = defineEmits<{
  pick: [item: McuSrc]
}>()

function pick(item: McuSrc) {
  emit('pick', item)
  // if (data.value.some(e => e.mcuSrc_id === item.id)) {
  //   const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
  //   data.value.splice(pos, 1)
  // } else {
  //   data.value.push({
  //     id: 0,
  //     mcuOrder_id: 0,
  //     mcuSrc_id: item.id,
  //     createdAt: "",
  //     updatedAt: "",
  //   })
  // }
}
</script>

<template>
  <div class="mb-5">
    <div class="font-semibold mb-1.5">
      Daftar Item
    </div>
    <div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
      <div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
        <Button 
          :variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
          type="button"
          @click="pick(item)"
        > 
          {{ item.name }}
        </Button>
      </div>
    </div>
  </div>
</template>
