<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">Title</label>
            <input v-model="form.title" required="true" class="input mb-5" type="text">

            <label class="font-bold">Description</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">Cancel</button>
            </div>
        </form>
    </div>
</template>

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

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

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

const disableButtons = ref(false)

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

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


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

        if (news.value) {
            news.value.push({
                title: form.value.title,
                description: form.value.description,
                date: Date.now()
            })
        }

        toast.success('Bericht is verstuurd')

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

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

    disableButtons.value = false
}
</script>