<script setup>
import BarcodeModal from "@/components/BarcodeModal.vue";
import ShipmentListItem from "@/components/ShipmentListItem.vue";

import { useResourceStore } from "@/stores/ResourceStore";
import { storeToRefs } from "pinia";
import { ref, onMounted } from "vue";

const { shipments } = storeToRefs(useResourceStore());
const modals = ref([]);
const pdfUrlModal = ref(false);
const pdfUrl = ref("");

onMounted(() => {
  shipments.value.forEach((shipment) => {
    modals.value[shipment.id] = false;
  });
});
</script>

<template>
  <div>
    <BarcodeModal v-model="pdfUrlModal" :pdf-url="pdfUrl"></BarcodeModal>

    <ShipmentListItem
      v-for="shipment in shipments"
      :key="shipment.id"
      :shipment="shipment"
      :modals="modals"
      :pdf-url-modal="pdfUrlModal"
      :pdf-url="pdfUrl"
      @update:pdfUrlModal="$event => pdfUrlModal = $event"
      @update:pdfUrl="$event => pdfUrl = $event"
    />
  </div>
</template>
