<template>
  <v-card>
    <v-card-title class="headline">
      Wunsch hinzufügen
    </v-card-title>
    <v-card-subtitle>
      <NuxtLink to='/'>Oder zurück</NuxtLink>
    </v-card-subtitle>
    <v-card-text>
      <v-form ref='addform'>
        <v-text-field
          v-model="wish"
          label="Wunsch hier eingeben..."
          required
          :rules="[rules.required]"
        ></v-text-field>

        <v-btn class='mt-4' v-on:click='submitWish' color='primary'>
          <v-icon>mdi-plus</v-icon> Hinzufügen
        </v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { BASE_API_URL, getAxiosConfig } from '@/constants'

export default {
  name: 'addwish',
  data () {
    return {
      wish: "",
      rules: {
        required: value => !!value || 'Bitte einen Wunsch eingeben!',
      }
    }
  },
  methods: {
    submitWish() {
      if(!this.$refs.addform.validate()) {
        return
      }

      this.$axios.post(BASE_API_URL + "/wishes/create", {
        wish: this.wish,
      }, getAxiosConfig(localStorage.getItem("token"))).then(async response => {
        await this.$store.dispatch("wishes/fetchPersonal")
        await this.$refs.addform.reset()
        await this.$router.push('/')
      }).catch(error => {
        this.$swal("Fehler", "Überprüfe deine Eingaben und versuchs nochmal. Fehler:<br />" + JSON.stringify(error.response.data), "error")
      })
    }
  }
}
</script>

<style scoped>

</style>
