<template lang="pug">
base-notification(
  :can-remove="canRemove",
  :has-icon="false",
  :notification="notification",
  @click="action",
)
  div(slot="content")
    div(v-html="textString")
    .notifications-buttons
      .btn.btn-small.btn-success(@click.stop="accept()") {{ $t('accept') }}
      .btn.btn-small.btn-danger(@click.stop="reject()") {{ $t('reject') }}
</template>

<script>
import BaseNotification from './base';
import { mapState } from 'client/libs/store';

export default {
  props: ['notification', 'canRemove'],
  components: {
    BaseNotification,
  },
  computed: {
    ...mapState({user: 'user.data'}),
    isPublicGuild () {
      if (this.notification.data.publicGuild === true) return true;
      return false;
    },
    textString () {
      const guild = this.notification.data.name;

      if (this.isPublicGuild) {
        return this.$t('invitedToPublicGuild', {guild});
      } else {
        return this.$t('invitedToPrivateGuild', {guild});
      }
    },
  },
  methods: {
    action () {
      if (!this.isPublicGuild) return;

      const groupId = this.notification.data.id;

      this.$router.push({ name: 'guild', params: { groupId } });
    },
    async accept () {
      const group = this.notification.data;

      if (group.cancelledPlan && !confirm(this.$t('aboutToJoinCancelledGroupPlan'))) {
        return;
      }

      await this.$store.dispatch('guilds:join', {groupId: group.id, type: 'guild'});
      this.$router.push({ name: 'guild', params: { groupId: group.id } });
    },
    reject () {
      this.$store.dispatch('guilds:rejectInvite', {groupId: this.notification.data.id, type: 'guild'});
    },

  },
};
</script>
