<script setup>
import MdrSelect from "@/components/Mudur-Ui-Kit/MdrSelect.vue";
import { computed } from "vue";
import { useResourceStore } from "@/stores/ResourceStore";
import { storeToRefs } from "pinia";

const props = defineProps({
  modelValue: { type: [String, Number, null], required: true },
  disabled: { type: Boolean, default: false },
});

const emit = defineEmits(["update:modelValue"]);

const { cargoIntegrations } = storeToRefs(useResourceStore());

const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

const integrations = computed(() => {
  return cargoIntegrations.value.map(integration => ({
    value: integration.id,
    text: integration.name
  }));
});
</script>
<template>
  <MdrSelect
    v-model="componentValue"
    :options="integrations"
    :disabled="disabled"
    value-key="value"
    text-key="text"
    class="w-full"
    required
  />
</template> 