<script lang="ts" setup>
import { PhPlus } from '@phosphor-icons/vue';
import type { World } from '~/models/World';

const route = useRoute()
const id = route.params.id

const { data: res, pending } = await useFetch('/api/worlds/query', { query: { id, full: true } })

const world = res.value?.data as World

useHead({
  title: 'Profil'
})
definePageMeta({
  middleware: ['auth-guard']
})

const user = useSupabaseUser()

// Redirect user back home when they log out on the page
watch(user, (n, _o) => {
  if (!n) {
    navigateTo('/')
  }
})

const modalOpened = ref<boolean>(false)
</script>

<template>
  <main class="p-8">
    <template v-if="pending">
      <Heading>Chargement...</Heading>
    </template>
    <template v-else-if="world">
      <header class="lg:w-1/2 mb-8">
        <Spacing>
          <Heading>{{ world.name }}</Heading>

          <p>{{ world.description }}</p>
        </Spacing>
      </header>

      <section>
        <Spacing size="lg">
          <div class="flex items-center gap-3">
            <Heading>Calendriers</Heading>

            <UiTooltipProvider :delay-duration="250">
              <UiTooltip>
                <UiTooltipTrigger as-child>
                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => modalOpened = true">
                    <PhPlus size="17"/>
                  </UiButton>
                </UiTooltipTrigger>
                <UiTooltipContent>
                  <p>Ajouter un calendrier</p>
                </UiTooltipContent>
              </UiTooltip>
            </UiTooltipProvider>
          </div>

          <ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
            <li v-for="calendar in world.calendars" :key="calendar.id">
              <UiCard
                v-if="calendar"
                class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
                :link="`/i/calendar/${calendar.id}`"
              >
                <UiCardHeader>
                  <UiCardTitle>{{ calendar.name }}</UiCardTitle>
                </UiCardHeader>

                <UiCardContent>
                  <p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
                </UiCardContent>
              </UiCard>
            </li>
          </ul>
          <template v-else>
            <p class="pl-6 opacity-75 italic">
              Aucun calendrier pour ce monde
            </p>
          </template>
        </Spacing>
      </section>

      <UiAlertDialog v-model:open="modalOpened">
        <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6">
          <UiAlertDialogTitle>
            <span class="text-2xl">
              <strong class="font-bold">{{ world.name }}</strong> — Nouveau calendrier
            </span>
          </UiAlertDialogTitle>

          <CalendarFormCreate />
        </UiAlertDialogContent>
      </UiAlertDialog>
    </template>
  </main>
</template>
