<template>
  <form class="review-form" @submit.prevent="onSubmit">
    <h3>Leave a review</h3>
    <label for="name">Name:</label>
    <input id="name" v-model="name">

    <label for="review">Review:</label>
    <textarea id="review" v-model="review"></textarea>

    <label for="rating">Rating:</label>
    <select id="rating" v-model.number="rating">
      <option>5</option>
      <option>4</option>
      <option>3</option>
      <option>2</option>
      <option>1</option>
    </select>

    <input class="button" type="submit" value="Submit">

  </form>
</template>


<script>
import axios from 'axios'

export default {
  name: 'ReviewForm',
  data() {
    return {
      name: '',
      review: '',
      rating: null
    }
  },
  methods: {
    onSubmit() {
      if (this.name == '' || this.review == '' || this.rating == null) {
        alert("Review is incomplete. Please fill out every field.")
        return
      }
      let productReview = {
        name: this.name,
        review: this.review,
        rating: this.rating
      }
      this.addReview(productReview)

      this.name = ''
      this.review = ''
      this.rating = null
    },
    addReview(review){
      // TODO: Append review to json
      axios.post('./reviews.json', JSON.stringify(review))
    }
  }
}
</script>
