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

import SoapiList from './list.vue'
import EarlyForm from './form.vue'
import RehabForm from './form-rehab.vue'
import FunctionForm from './form-function.vue'
import type { Encounter } from '~/models/encounter'

interface Props {
  encounter: Encounter
  label: string
  canUpdate?: boolean
}
const props = defineProps<Props>()

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

const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')

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

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

<template>
  <!-- {{ type }} -->
  <div>
    <SoapiList v-if="mode === 'list'" :label="label" :canUpdate="canUpdate" />
    <component
      v-else
      :is="ActiveForm"
      @back="backToList"
    />
  </div>
</template>
