<script setup lang="ts">
import { ref, computed } from 'vue'
import EarlyEntry from './early-entry.vue'
import EarlyRehabEntry from './early-rehab-entry.vue'
import FunctionEntry from './function-entry.vue'

const props = defineProps<{
  type: 'early' | 'early-rehab' | 'function'
  excludeFields?: string[]
}>()

const emits = defineEmits(['click', 'submit', 'cancel'])

const componentMap = {
  early: EarlyEntry,
  'early-rehab': EarlyRehabEntry,
  function: FunctionEntry,
}

const ActiveComponent = computed(() => componentMap[props.type])

const childRef = ref()

const validate = async () => {
  if (childRef.value?.validate) {
    const result = await childRef.value.validate()
    console.log('[Wrapper] Result from child validate:', result)
    return result
  } else {
    console.warn('validate() not found in child component')
    return { valid: false, data: null, errors: {} }
  }
}

defineExpose({ validate })
</script>

<template>
  <component
    ref="childRef"
    :is="ActiveComponent"
    :exclude-fields="excludeFields"
    @click="$emit('click', $event)"
    @submit="$emit('submit', $event)"
    @cancel="$emit('cancel', $event)"
    @modal="$emit('modal', $event)"
  />
</template>
