<template>
  <!-- <component :is="getResolvedComponent(formElement)" :model-value="input" @update:model-value="update($event, index)" /> -->
</template>

<script setup lang="ts">
// import { FormElementType, type FormOptionDto, type FormElementDto } from '~/.api-client'
// import { resolveComponent } from 'vue'

// const props = defineProps<{
//   formElementType: FormElementType
//   modelValue: FormOptionDto[]
// }>()

// const emit = defineEmits<{
//   (e: 'update:modelValue', value: FormOptionDto[]): void
// }>()

// // TODO: Lazy loading?
// function getResolvedComponent() {
//   switch (props.formElementType) {
//     case 'CHECKBOX':
//     case 'DROPDOWN':
//     case 'RADIOBUTTON':
//     case 'SWITCH':
//       return resolveComponent('TheSwitch')
//     case 'TEXTFIELD':
//       return resolveComponent('TheInput')
//     default:
//       return resolveComponent('Unimplemented')
//   }
// }

// const input = computed<FormOptionDto | FormOptionDto[]>({
//   get: () => {
//     if (props.formElementType === FormElementType.Switch) {
//       return props.modelValue[0]
//     } else {
//       return props.modelValue
//     }
//   },
//   set: (val) => {
//     // TODO
//     if (Array.isArray(val)) {
//       const updatedModelValue = [...props.modelValue]
//       updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
//       emit('update:modelValue', updatedModelValue)
//     } else {
//       emit('update:modelValue', val)
//     }
//   }
// })
</script>
