export default {
	name: "CookbookForm",
	setup() {
		const { ref, computed } = Vue;

		const title = ref("");
		const description = ref("");
		const nature = ref("");
		const logs = ref([""]);
		const who = ref("");

		const sent = ref(false);

		const disabled = computed(() => {
			return [title, description, nature, logs, who].some((input) => input.value == "");
		});

		const submit = function () {
			fetch("https://hub.xpub.nl/soupboat/cookbook/", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					title: title.value,
					description: description.value,
					nature: nature.value,
					logs: logs.value,
					who: who.value,
				}),
			});
			sent.value = true;
			title.value = "";
			description.value = "";
			nature.value = "";
			logs.value = [""];
			who.value = "";
		};

		return { title, description, nature, logs, who, disabled, submit, sent };
	},
	template: `
        <section class='recipe form'>


        <div v-if="sent">

        <div class="entry"> 
              Thanks for sharing!
              Your entry is being added to the cookbook. 
            </div>

            <div class="entry"> 
              <button @click="sent = false">Send another</button>
            </div>

            



        </div>
        <div v-else>
            <div class="entry"> 
              <label for="title">Title</label>
              <input type="text" v-model='title'/>
            </div>
            
            <div class="entry"> 
              <label for="description">Description</label>
              <textarea v-model="description"></textarea>
            </div>
            
            <div class="entry"> 
              <label for="nature">Nature of the input</label>
              <input type="text" v-model="nature" />
            </div>
            
            <div class="entry"> 
              <label for="log">Process Log</label>
              <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
              <button class="add" @click="logs.push('')">+</button>
            </div>
            
            <div class="entry"> 
              <label for="who">Who</label>
              <input type="text" v-model="who" />
            </div>
            
            <div class="entry"> 
              <button @click="submit" class="submit" :disabled="disabled">Submit</button>
            </div>
          </div>
        </section>
        
        <!-- <dl>
          <dt>Title</dt>
          <dd>{{title}}</dd>     

      <dt>Description</dt>
      <dd>{{description}}</dd>

      <dt>Nature</dt>
      <dd>{{nature}}</dd>

      <dt>Log</dt>
      <dd>
        <ol>
          <li v-for="log in logs">{{log}}</li>
        </ol>
      </dd>
            
      <dt>Who</dt>
      <dd>{{who}}</dd>
    </dl> -->
  `,
};