<template>
  <kuc-combobox
    v-if="items?.length"
    :items="items"
    :value="modelValue"
    @change="updateValue"
    :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
  />
</template>

<script setup lang="ts">
import { getAvailableCondition } from '@/js/conditions';
import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
import type { KucEvent } from '@/types/my-kintone';
import { defineProps, defineEmits, computed } from 'vue';

const props = defineProps<{
  modelValue: string;
  selectedAppData: CachedSelectedAppData;
  whereConditions: WhereCondition[];
  index: number;
}>();

const items = computed(() =>
  getAvailableCondition(props.whereConditions[props.index]?.field, props.selectedAppData.appFields),
);

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const updateValue = (event: KucEvent) => {
  emit('update:modelValue', event.detail.value);
};
</script>
