<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useQueryMode } from '@/composables/useQueryMode' // asumsikan ini ada

import SoapiList from './list.vue'
import EarlyForm from './form.vue'
import RehabForm from './form-rehab.vue'
import FunctionForm from './form-function.vue'

const route = useRoute()
const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')

const { mode, openForm, backToList } = useQueryMode('mode')

const formMap = {
  'early-medical-assessment': EarlyForm,
  'rehab-medical-assessment': RehabForm,
  'function-assessment': FunctionForm,
}

const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
</script>

<template>
  <div>
    <SoapiList
      v-if="mode === 'list'"
      @add="openForm"
    />

    <component
      v-else
      :is="ActiveForm"
      @back="backToList"
    />
  </div>
</template>
