<script setup>
import SpanSkeleton from "@/components/displays/skeletons/SpanSkeleton.vue";
import { ref, defineProps } from "vue";
const props = defineProps(["registration_numbers", "order_id", "loadOrder"]);
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { Colors } from "@/ThemeConfig.vue";

// Check if the required props are passed
if (!props.registration_numbers) {
  throw new Error("Missing required prop: registration_numbers");
}
if (!props.order_id) {
  throw new Error("Missing required prop: order_id");
}
if (!props.loadOrder) {
  throw new Error("Missing required prop: loadOrder");
}
</script>

<template>
  <!-- Registration numbers shown with space between them -->
  <div class="columns is-multiline is-mobile mb-0">
    <template v-for="(item, index ) in props.registration_numbers" :key="index">
      <div class="column is-4">
        <SpanSkeleton
            :isSkeleton="props.registration_numbers[index] === null"
            width="100%"
            height="1.5rem"
            skeleton-class="is-size-4"
        >
          <!-- Field -->
          <div class="field">
            <div class="control">
              <div
                  class="tags has-addons is-fullwidth is-flex-wrap-nowrap is-clickable"
                   @click="SessionUser.editField.showEditFieldForm(
                      '/order',
                      props.order_id,
                      'reg_' + index,
                      item,
                      'Reg ' + index,
                      props.loadOrder
                      ).then(() => props.loadOrder())">
                <span class="tag is-dark">Reg. {{ index }}</span>
                <span
                    class="tag is-info"
                    style="width: 100%;"
                    :style="{ 'background-color': (props.registration_numbers[index])
                    ? Colors.global.activeColor
                    : Colors.global.disabledTextColor,
                    }"
                >
                      {{ item }}
                    </span>
              </div>
            </div>
          </div>
        </SpanSkeleton>
      </div>
    </template>
  </div>
</template>

<style scoped>

</style>