<template>
  <thread-header-btn
    @click="toggleFavorite"
    :color="color"
    icon="la la-bookmark"
  />
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { MessageThread } from '@/widgets/messages/types/MessageThread'
import ThreadHeaderBtn from '@/widgets/messages/components/thread/header/ThreadHeaderBtn.vue'
import MessageModule from '@/widgets/messages/modules/MessageModule'
import CountingMessagesModule from '@/widgets/messages/modules/CountingMessagesModule'
import { MessageFilterType } from '@/widgets/messages/types/CountingMessages'

@Component({
  components: { ThreadHeaderBtn },
})
export default class FavoriteToggle extends Vue {
  @Prop({ type: Object, required: true })
  thread!: MessageThread

  @Inject('MessageModule')
  messageModule!: MessageModule

  @Inject('CountingMessagesModule')
  countingMessagesModule!: CountingMessagesModule

  get color(): string {
    return this.thread.isFavorite ? 'negative' : 'blue-grey-3'
  }

  toggleFavorite() {
    if (this.thread.isFavorite) {
      this.messageModule.removeThreadFromFavorite(this.thread.id)
      this.countingMessagesModule.decrement(MessageFilterType.favoriteThreads)

      if (this.$route.params.type === MessageFilterType.favoriteThreads) {
        this.messageModule.removeThread(this.thread.id)
      }
    } else {
      this.messageModule.addThreadToFavorite(this.thread.id)
      this.countingMessagesModule.increment(MessageFilterType.favoriteThreads)
    }
  }
}
</script>
