<template>
  <q-btn @click="isMuted = !isMuted" :icon="icon" round flat dense />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { QBtn } from 'quasar'
import NotificationsConfigStore, {
  getNotificationsConfigStore,
} from '../stores/NotificationsConfigStore'
import LocalStorageHelper from '../helpers/LocalStorageHelper'

@Component({
  inheritAttrs: false,
  components: { QBtn },
})
export default class UiNotificationsSoundBtn extends Vue {
  notificationConfigStore!: NotificationsConfigStore

  created() {
    this.notificationConfigStore = getNotificationsConfigStore(this.$store)
    this.notificationConfigStore.setIsMuted(
      LocalStorageHelper.getIsMuted() || false
    )
  }

  get isMuted(): boolean {
    return this.notificationConfigStore.isMuted
  }

  set isMuted(value: boolean) {
    this.notificationConfigStore.setIsMuted(value)
  }

  get icon(): string {
    return this.isMuted ? 'las la-volume-mute' : 'las la-volume-up'
  }
}
</script>
