export default {
	setup() {
		const { ref, computed } = Vue;

		const title = ref("");
		const link = ref("");
		const overview = ref("");
		const categories = ref([""]);
		const date = ref(null);

		const sent = ref(false);
		const disabled = computed(() => {
			return [title, overview, overview, categories].some((input) => input.value == "");
		});

		const submit = function () {
			fetch("https://hub.xpub.nl/soupboat/padliography/", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					title: title.value,
					link: link.value,
					overview: overview.value,
					categories: categories.value,
					date: date.value,
				}),
			});
			sent.value = true;

			title.value = "";
			link.value = "";
			overview.value = "";
			categories.value = [""];
			date.value = null;
		};

		return { title, link, overview, categories, date, submit, sent, disabled };
	},

	template: `
    
        <div class='app-form'>
			<h2>Add a new pad</h2>
			<input type="text" v-model="link" placeholder="URL" />
			<input type="text" v-model="title" placeholder="Title" />

			<input type="text" v-model="overview" placeholder="Description" />
			<input type="text" v-model="categories[index]" placeholder="Category" v-for="(category, index) in categories" :key="index"/> 
			<button class="add" @click="categories.push('')">+</button>
			<label for="date">date</label>
			<input type="date" v-model="date" />
             
			<button @click="submit">Insert</button>
        </div>
    
    
    `,
};