<template>
    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
        <form @submit.prevent="sendNews" class="flex flex-col">
            <label class="font-bold">Titel</label>
            <input v-model="form.title" required="true" class="input mb-5" type="text">

            <label class="font-bold">Beschrijving</label>
            <textarea v-model="form.description" required="true" class="input mb-5" />

            <div class="w-full flex flex-wrap justify-between">
                <input :disabled="disableButtons" type="submit" value="Stuur Bericht" class="btn w-full sm:w-40 mb-1">
                <button @click="router.back()" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Annuleer</button>
            </div>
        </form>
    </div>
</template>

<script setup>
import { addDoc, collection, serverTimestamp, Timestamp } from 'firebase/firestore'
import { useToast } from 'vue-toastification'

definePageMeta({
    title: 'Nieuw Bericht',
    key: 'back'
})

const { news, db, auth } = inject('firebase')
const router = useRouter()
const toast = useToast()

const disableButtons = ref(false)

const form = ref({
    title: '',
    description: '',
})

const sendNews = async () => {
  disableButtons.value = true

  try {
    const idToken = await auth.value.currentUser.getIdToken(true)
    console.log(idToken)
      
    const { error } = await useFetch('/api/sendmessage', {
      method: 'post',
      body: { title: form.value.title, body: form.value.description, token: idToken } 
    })

    if (error.value) {
      console.log(error.value)
      return toast.error('Error tijdens het versturen van het bericht')
    }

    await addDoc(collection(db, "news"), {
      title: form.value.title,
      description: form.value.description,
      date: serverTimestamp()
    });

    if (news.value) {
      news.value.unshift({
        title: form.value.title,
        description: form.value.description,
        date: Timestamp.now()
      })
    }
    toast.success('Bericht is verstuurd')

    navigateTo('/news')
  } catch (e) {
    console.log(e)

    toast.error('Error tijdens het berict sturen')
  }
  

  disableButtons.value = false
}
</script>
