<script setup>

const toast = useToast()
const dataStore = useDataStore()
const supabase = useSupabaseClient()
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 useSupabaseSelectSingle(props.type, props.id, dataType.supabaseSelectWithInformation || "*")
  } else if(props.mode === "edit") {
    //Load Data for Edit
    const data = JSON.stringify((await supabase.from(props.type).select().eq("id", props.id).single()).data)
    //await useSupabaseSelectSingle(type, route.params.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 useSupabaseSelect(props.type, dataType.supabaseSelectWithInformation || "*", dataType.supabaseSortColumn,dataType.supabaseSortAscending || false)
  }

  loaded.value = true
}

setupPage()




</script>

<template>
  <UModal :fullscreen="props.mode === 'show'">
    {{props.type}}
    <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('return-data',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"
    />
  </UModal>
</template>

<style scoped>

</style>