<script setup>
const props = defineProps({
  invItem: Object,
  selected: Boolean,
});

const emit = defineEmits(["selectInvItem", "unselect"]);
const { $dayjs } = useNuxtApp();
</script>

<template>
  <tr
    :class="['is-clickable', selected && 'is-selected']"
    @click="selected ? emit('unselect') : emit('selectInvItem', invItem.id)"
  >
    <td>
      <div>
        <p class="fs-14">{{ invItem.name }}</p>
        <p class="fs-12 has-text-grey">{{ invItem.category }}</p>
      </div>
    </td>
    <td class="is-family-monospace fs-12">{{ invItem.sku }}</td>
    <td>{{ invItem.storage }}</td>
    <td class="is-family-monospace fs-12">{{ invItem.storage__position }}</td>
    <td class="has-text-right">{{ invItem.stock }}</td>
    <td class="has-text-right">{{ invItem.preorder }}</td>
    <td :class="['has-text-right', invItem.status === 'OK' ? 'has-text-success-30' : 'has-text-warning-30']">
      {{ invItem.available }}
    </td>
    <td class="is-family-monospace fs-12">{{ invItem.batch }}</td>
    <td>{{ $dayjs(invItem.expired).format("L") }}</td>
    <td>
      <span
        :class="[
          'tag is-rounded',
          invItem.status === 'OK'
            ? 'has-background-success-soft has-text-success-bold'
            : 'has-background-warning-soft has-text-warning-bold',
        ]"
        >{{ invItem.status }}</span
      >
    </td>
  </tr>
</template>
<style scoped>
tr.is-selected {
  --bulma-table-row-active-background-color: var(--bulma-primary-95);
  color: unset;
}
td {
  vertical-align: middle;
  --bulma-table-cell-padding: 0.75em;
}
</style>
