<script setup>

const toast = useToast()
const dataStore = useDataStore()
const modal = useModal()
const props = defineProps({
  type: {
    type: String,
    required: true
  },
  mode: {
    type: String,
    required: true,
    default: "show"
  },
  createQuery: {
    type: Object
  },
  id: {
    type: String,
  },
})



const emit = defineEmits(["updateNeeded","returnData"])

const dataType = dataStore.dataTypes[props.type]

const loaded = ref(false)
const items = ref([])
const item = ref({})

const setupPage = async () => {
  if(props.mode === "show") {
    //Load Data for Show
    item.value = await useEntities(props.type).selectSingle(props.id, dataType.selectWithInformation || "*")
  } else if(props.mode === "edit") {
    //Load Data for Edit
    const data = JSON.stringify(await useEntities(props.type).selectSingle(props.id))
    item.value = data

  }  else if(props.mode === "create") {
    //Load Data for Create
    item.value = JSON.stringify({})

  } else if(props.mode === "list") {
    //Load Data for List
    items.value = await useEntities(props.type).select(dataType.selectWithInformation || "*", dataType.sortColumn,dataType.sortAscending || false)
  }

  loaded.value = true
}

setupPage()




</script>

<template>
  <UModal :fullscreen="props.mode === 'show'">
    <template #content>
      <EntityShow
          v-if="loaded && props.mode === 'show'"
          :type="props.type"
          :item="item"
          @updateNeeded="setupPage"
          :key="item"
          :in-modal="true"
      />
      <EntityEdit
          v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
          :type="props.type"
          :item="item"
          :inModal="true"
          @return-data="(data) => emit('returnData', data)"
          :createQuery="props.createQuery"
          :mode="props.mode"
      />
  <!--    <EntityList
          v-else-if="loaded && props.mode === 'list'"
          :type="props.type"
          :items="items"
      />-->
      <UProgress
          v-else
          animation="carousel"
          class="p-5 mt-10"
      />
    </template>
  </UModal>
</template>

<style scoped>

</style>
