<script lang="ts" setup>
import type { GuestbookMessage } from '@prisma/client'
import { providers } from '~~/types'

useHead({
  title: 'Sign my guestbook • Arthur Danjou',
})

const { loggedIn, clear, user } = useUserSession()
const { data: messages, refresh } = useFetch<Array<GuestbookMessage>>('/api/messages', { method: 'get' })

const isOpen = ref(false)

const toast = useToast()
const messageContent = ref<string>('')
async function sign() {
  if (messageContent.value.length < 7 || messageContent.value.length > 58)
    return

  isOpen.value = false
  await $fetch('/api/message', {
    method: 'post',
    body: {
      message: messageContent.value,
    },
  }).then(async () => {
    toast.add({
      title: `Thank's for leaving a message!`,
      description: 'Your can see it at the top of the messages.',
      icon: 'i-material-symbols-check-circle-outline-rounded',
      timeout: 4000,
    })
    await refresh()
  }).catch(() => {
    toast.add({
      title: 'An error occured when signing the book!',
      color: 'red',
    })
  })
  messageContent.value = ''
}
async function deleteMessage(id: number) {
  if (!user.value.admin)
    return

  await $fetch('/api/message', {
    method: 'delete',
    body: {
      id,
    },
  }).then(async () => {
    toast.add({
      title: `Message successfully deleted`,
      icon: 'i-material-symbols-check-circle-outline-rounded',
      color: 'green',
      timeout: 4000,
    })
    await refresh()
  }).catch(() => {
    toast.add({
      title: 'An error occured when deleting a message!',
      color: 'red',
    })
  })
}
</script>

<template>
  <section class="w-container lg:mt-24 my-8">
    <div class="max-w-2xl space-y-8 md:mb-16 mb-8">
      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
        You want to leave a message ?
      </h1>
      <p class="leading-relaxed text-subtitle">
        Your opinion means a lot to me. Feel free to share your impressions of my projects, explore my site, or simply leave a personalised message. Your comments are a source of inspiration and continuous improvement. Thank you for taking the time to contribute to this virtual community. I look forward to reading what you have to share!
      </p>
    </div>
    <div class="flex justify-center md:justify-start">
      <UButton
        class="mb-8 md:mb-16"
        label="Want to sign my book ?"
        icon="i-ph-circle-wavy-question-bold"
        @click.prevent="isOpen = true"
      />
    </div>
    <UModal v-model="isOpen">
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <h1 class="text-md font-bold">
                Enter just below your message to sign my book
              </h1>
            </div>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>
        <div>
          <div v-if="loggedIn" class="flex items-center justify-between gap-4">
            <div class="w-full relative flex items-center">
              <input
                v-model="messageContent"
                type="text"
                required
                min="7"
                max="58"
                class="w-full rounded-lg p-2 h-10 focus:outline-none bg-gray-100 dark:bg-gray-800"
                placeholder="Leave a message"
              >
              <UButton
                class="absolute right-1 top-1 rounded-md"
                label="Send"
                :disabled="messageContent.trim().length < 7 || messageContent.trim().length > 58"
                variant="solid"
                @click.prevent="sign()"
              />
            </div>
            <UButton
              variant="outline"
              @click.prevent="clear()"
            >
              Logout
            </UButton>
          </div>
          <div v-else class="flex gap-2 justify-center">
            <UButton
              v-for="provider in providers"
              :key="provider.slug"
              :label="provider.label"
              :color="provider.color"
              variant="solid"
              :icon="provider.icon"
              :to="provider.link"
              external
            />
          </div>
        </div>
      </UCard>
    </UModal>
    <div v-if="messages" class="columns-1 md:columns-2 lg:columns-4 gap-8 space-y-8">
      <div
        v-for="message in messages"
        :key="message.id"
        class="relative overflow-hidden sm:p-6 px-4 py-5 border border-zinc-100 p-6 dark:border-zinc-700/40 rounded-lg"
      >
        <p class="text-sm text-subtitle">
          “{{ message.message }}”
        </p>
        <div class="flex items-center gap-4 mt-4">
          <div class="h-8 w-8 rounded-full">
            <img class="w-full h-full rounded-full" :src="message.image" alt="Nature">
          </div>
          <p class="font-bold">
            {{ message.username }}
          </p>
        </div>
        <UButton
          v-if="user && user.admin"
          class="absolute top-1 right-1"
          icon="i-material-symbols-delete-forever-outline-rounded"
          color="red"
          variant="ghost"
          :ui="{ rounded: 'rounded-full' }"
          size="xs"
          @click.prevent="deleteMessage(message.id)"
        />
      </div>
    </div>
    <div v-else class="my-4 text-subtitle">
      <div class="flex gap-2 items-center">
        <UIcon name="i-eos-icons-loading" />
        <p>The messages are loading...</p>
      </div>
    </div>
  </section>
</template>

<style>

</style>
