<template>
  <v-card>
    <v-card-title>{{ $t("wishlist_own_wishes_title") }}</v-card-title>
    <v-card-subtitle>{{ $t("wishlist_own_wishes_subtitle") }}</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>{{ $t("delete_wish_button") }}</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> {{ $t("add_wish_button") }}</v-btn>
      </NuxtLink>
    </div>
  </v-card>
</template>

<script>
export default {
  name: 'wishlist',
  methods: {
    deleteWish(id) {
      this.$swal({
        title: this.$t("confirm_delete_wish_header"),
        text: this.$t("confirm_delete_wish_body"),
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: this.$t("confirm_delete_wish_cancel_button"),
        confirmButtonText: this.$t("confirm_delete_wish_button"),
      }).then((result) => {
        if (result.value) {
          this.$store.dispatch('wishes/deleteWish', id)
          this.$store.dispatch("wishes/fetchPersonal")
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
