<script setup lang="ts">
import List from './list.vue'
import Form from './form.vue'
import View from './view.vue'

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

// Props
interface Props {
  encounter: Encounter
}

const props = defineProps<Props>()

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

<template>
  <div>
    <List
      v-if="mode === 'list'"
      :encounter="props.encounter"
      @add="goToEntry"
      @edit="goToEntry({ fromView: false })"
      @view="goToView"
    />
    <View
      v-else-if="mode === 'view'"
      :encounter="props.encounter"
    />
    <Form v-else />
  </div>
</template>
