<template>
  <widget-bar-btn @click="removeAll" :loading="isLoading" icon="la la-trash" />
</template>

<script lang="ts">
import { Component, Inject, Vue } from 'vue-property-decorator'
import { NotificationsModule } from '@/widgets'
import WidgetBarBtn from '@/widgets/base/components/widget-bar/WidgetBarBtn.vue'
import { NotifyHelper } from '@/helpers'
import { RouteNames } from '@/widgets/notifications/router/routeNames'

@Component({
  components: { WidgetBarBtn },
})
export default class ClearAllNotificationsBtn extends Vue {
  @Inject('NotificationsModule')
  notificationsModule!: NotificationsModule

  isLoading = false

  removeAll() {
    this.isLoading = true

    this.notificationsModule
      .closeAllNotifications()
      .catch(() => NotifyHelper.serverError())
      .then(() => this.$router.push({ name: RouteNames.index }))
      .finally(() => (this.isLoading = false))
  }
}
</script>
