<i18n>
{
  "en": {
    "delete-are-you-sure": "Are you sure you want to delete this event? | Are you sure you want to delete these events?",
    "eventDeleteSuccess": "Event deleted successfully | Events deleted successfully"
  },
  "de": {
    "delete-are-you-sure": "Sind sie sicher, dass sie diese Veranstaltung Löschen wollen? | Sind sie sicher, dass sie diese Veranstaltungen löschen wollen?",
    "eventDeleteSuccess": "Event erfolgreich gelöscht | Events erfolgreich gelöscht"
  }
}
</i18n>

<template>
  <v-card>
    <v-card-title class="elevation-3">
      <div class="headline">{{ $t('title') }}</div>
    </v-card-title>
    <v-card-text>
      {{ $tc('delete-are-you-sure', dialog.info.length) }}
      <template v-for="item in dialog.info">
        <div class="grey--text" :key="item.id">{{ item.name }} ({{ item.description }})</div>
      </template>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn flat="flat" @click.native="$store.commit('events/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
      <v-btn color="error" @click="deleteEvents">{{ $t('delete') }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'EventModuleDelete',
  data () {
    return {
    }
  },
  computed: {
    ...mapState('events', ['dialog'])
  },
  methods: {
    ...mapMutations('events', ['setDialog', 'loadEvents']),
    async deleteEvents () {
      var deleteIds = []
      for (let i = 0; i < this.dialog.info.length; i++) {
        deleteIds.push(this.dialog.info[i].id)
      }
      await this.$http.post('/api/events?delete', { ids: deleteIds })
      this.setDialog({ show: false })
      this.$snackbar({ color: 'success', text: this.$tc('eventDeleteSuccess', [deleteIds.length]) })
      this.$store.dispatch('events/loadEvents')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
