import { mapGetters } from 'vuex'

import ConfirmModal from './confirm_modal.vue'
import Select from 'src/components/select/select.vue'

export default {
  props: ['type', 'user', 'status'],
  emits: ['hide', 'show', 'muted'],
  data: () => ({
    showing: false
  }),
  components: {
    ConfirmModal,
    Select
  },
  computed: {
    domain () {
      return this.user.fqn.split('@')[1]
    },
    keypath () {
      if (this.type === 'domain') {
        return 'status.mute_domain_confirm'
      } else if (this.type === 'conversation') {
        return 'status.mute_conversation_confirm'
      }
    },
    conversationIsMuted () {
      return this.status.conversation_muted
    },
    domainIsMuted () {
      return new Set(this.$store.state.users.currentUser.domainMutes).has(this.domain)
    },
    shouldConfirm () {
      switch (this.type) {
        case 'domain': {
          return this.mergedConfig.modalOnMuteDomain
        }
        default: { // conversation
          return this.mergedConfig.modalOnMuteConversation
        }
      }
    },
    ...mapGetters(['mergedConfig'])
  },
  methods: {
    optionallyPrompt () {
      if (this.shouldConfirm) {
        this.show()
      } else {
        this.doMute()
      }
    },
    show () {
      this.showing = true
      this.$emit('show')
    },
    hide () {
      this.showing = false
      this.$emit('hide')
    },
    doMute () {
      switch (this.type) {
        case 'domain': {
          if (!this.domainIsMuted) {
            this.$store.dispatch('muteDomain', { id: this.domain })
          } else {
            this.$store.dispatch('unmuteDomain', { id: this.domain })
          }
          break
        }
        case 'conversation': {
          if (!this.conversationIsMuted) {
            this.$store.dispatch('muteConversation', { id: this.status.id })
          } else {
            this.$store.dispatch('unmuteConversation', { id: this.status.id })
          }
          break
        }
      }
      this.$emit('muted')
      this.hide()
    }
  }
}