<script setup>

  const { post } = defineProps(['post'])

  const { createItems } = useDirectusItems()

  const comment = reactive({
    post: post,
    name: undefined,
    email: undefined,
    website: undefined,
    content: undefined,
    test: false,
    sent: false
  })

  async function onSubmit () {

    if (!comment.test) {
      try {
        const items = [{
          post: comment.post,
          name: comment.name,
          email: comment.email,
          website: comment.website,
          comment: comment.content
        }]
  
        comment.sent = true
  
        await createItems({ collection: "comments", items });
      } catch (e) {}
    }

  }

</script>

<template>
  <form v-if="!comment.sent" class="form" :state="comment" @submit.prevent="onSubmit">
    <div class="group textarea">
      <label for="comment">Comment</label>
      <textarea v-model="comment.content" id="comment" placeholder="Start typing here" required="true" ></textarea>
    </div>

    <div class="group">
      <label for="name">Name</label>
      <input v-model="comment.name" id="name" type="text" placeholder="Your name" required="true" />
    </div>

    <div class="group">
      <label for="email">Email</label>
      <input v-model="comment.email" id="email" type="email" placeholder="Email address" required="true" />
    </div>

    <div class="group">
      <label for="website">Website<sub>(optional)</sub></label>
      <input v-model="comment.website" id="website" type="text" placeholder="Web address" />
    </div>

    <div class="group hide">
      <label name="test">Is this your favorite website?</label>
      <input v-model="comment.test" type="checkbox" />
    </div>

    <button type="submit" >Submit</button>

  </form>
  <div v-if="comment.sent" class="success">
    <h3>Success, your comment was submitted</h3>
    <p>Thank you for supporting our blog & providing your <br>viewpoint on the topics discussed.</p>
  </div>
</template>