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

<script setup lang="ts">
import { getComponent } 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 type = computed(() => getComponent(props.whereConditions[props.index]?.condition));

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

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