<template>
  <v-card>
    <v-card-title>Deine Wünsche</v-card-title>
    <v-card-subtitle>Sollte ein Wunsch abgeschnitten sein, versuch mal dein Gerät zu kippen.</v-card-subtitle>

    <div class='pa-4'>
      <v-list-item v-for='item in this.$store.state.wishes.personal' :key='item.wish+item.id'>
        <v-list-item-content>
          <v-list-item-title>{{ item.wish }}</v-list-item-title>
        </v-list-item-content>
        <v-list-item-action>
          <v-btn style='float: right' v-on:click='deleteWish(item.id)' outlined color='primary'><v-icon>mdi-delete</v-icon>Löschen</v-btn>
        </v-list-item-action>
      </v-list-item>
      <hr />
      <NuxtLink to='/addwish'>
        <v-btn class='mt-4' block color='primary'><v-icon>mdi-plus</v-icon> Wunsch hinzufügen</v-btn>
      </NuxtLink>
    </div>
  </v-card>
</template>

<script>
export default {
  name: 'wishlist',
  methods: {
    deleteWish(id) {
      this.$swal({
        title: 'Wunsch löschen?',
        text: 'Wunsch wirklich löschen?',
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: "Abbrechen",
        confirmButtonText: 'Löschen',
      }).then((result) => {
        if (result.value) {
          this.$store.dispatch('wishes/deleteWish', id)
          this.$store.dispatch("wishes/fetchPersonal")
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
