<template>
  <q-tr :props="$attrs.props" no-hover>
    <q-td>{{ type }}</q-td>
    <q-td>
      <ui-toggle v-model="isTypeEnabled" />
    </q-td>
    <q-td>
      <ui-toggle v-model="isEnabledPopupType" />
    </q-td>
  </q-tr>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QTd, QTr } from 'quasar'
import UiToggle from '../../../../lib-components/form/UiToggle.vue'
import NotificationsStore, {
  getNotificationsStore,
} from '../stores/NotificationsStore'

@Component({ inheritAttrs: false, components: { UiToggle, QTr, QTd } })
export default class UiNotificationsTypesConfigItem extends Vue {
  @Prop(String) type!: string

  notificationStore!: NotificationsStore

  created() {
    this.notificationStore = getNotificationsStore(this.$store)
  }

  get isTypeEnabled(): boolean {
    return !this.notificationStore.excludedTypes.includes(this.type)
  }

  set isTypeEnabled(value: boolean) {
    this.notificationStore.toggleExcludeType(this.type)
  }

  get isEnabledPopupType(): boolean {
    return !this.notificationStore.excludedPopupTypes.includes(this.type)
  }

  set isEnabledPopupType(value: boolean) {
    this.notificationStore.toggleExcludePopupType(this.type)
  }
}
</script>
