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

import List from './list.vue'
import Form from './form.vue'

// Models
import type { Encounter } from '~/models/encounter'

// Props
interface Props {
  encounter: Encounter
}

const props = defineProps<Props>()
const route = useRoute()

const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
</script>

<template>
  <div>
    <List
      v-if="mode === 'list'"
      :encounter="props.encounter"
      @add="goToEntry"
      @edit="goToEntry"
    />
    <Form
      v-else
      @back="backToList"
    />
  </div>
</template>
