<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 '..'
import type { Site } from '../site'

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

const loading = vue.ref(false)
const site = vue.shallowRef<Site>()

const themeId = vue.computed(() => {
  return factorRouter.params.value.themeId as string | undefined
})

async function load() {
  if (!themeId.value)
    return

  loading.value = true

  site.value = await factorSites.loadSiteFromTheme({ themeId: themeId.value })

  loading.value = false
}

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="Theme Not Found"
      :description="`The theme associated with this URL is missing (${themeId}).`"
    />
  </div>
</template>
