<script lang="ts" setup>
import { useService, vue, waitFor } from '@factor/api'
import ElZeroBanner from '@factor/ui/ElZeroBanner.vue'
import ElSpinner from '@factor/ui/ElSpinner.vue'
import type { FactorSites } from '..'

const { factorRouter, factorSites } = useService<{ factorSites: FactorSites }>()

const loading = vue.ref(false)
async function load() {
  const siteId = factorRouter.params.value.siteId as string
  if (!siteId)
    return

  loading.value = true

  await factorSites.loadSite({ siteId })
  loading.value = false
}

const site = vue.computed(() => factorSites.activeSite.value)

load().catch(error => console.error(error))
</script>

<template>
  <div v-if="loading" class="text-theme-300 flex justify-center pt-32">
    <ElSpinner class="h-12 w-12" />
  </div>
  <div v-else-if="site">
    <div v-for="(regionCard, regionKey) in site.layout" :key="regionKey">
      <component
        :is="regionCard.value?.tpl.value?.settings.el"
        :card="regionCard.value"
      />
    </div>
  </div>
  <div v-else>
    <ElZeroBanner
      class="h-full w-full"
      title="Site Not Found"
      description="The site associated with this URL is missing."
    />
  </div>
</template>
