<template>
  <div v-for="formElement in formElements" :key="formElement.id">
    <component :is="getResolvedComponent(formElement)" />
  </div>
</template>

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

defineProps<{
  formElements: FormElementDto[]
}>()

// TODO: Lazy loading?
function getResolvedComponent(formElement: FormElementDto) {
  switch (formElement.type) {
    case 'CHECKBOX':
    case 'DROPDOWN':
    case 'RADIOBUTTON':
    case 'SWITCH':
    case 'TEXTFIELD':
      return resolveComponent('TheInput')
    default:
      return resolveComponent('Unimplemented')
  }
}
</script>
