<template>
  <q-tr :props="$attrs.props" no-hover>
    <q-td>{{ name }}</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, Inject, Prop, Vue } from 'vue-property-decorator'
import { QTd, QTr } from 'quasar'
import { UiToggle } from '@/lib-components'
import NotificationsModule from '@/widgets/notifications/modules/NotificationsModule'
import { NotificationCode } from '@/widgets/notifications/types/NotificationEvent'

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

  @Inject('NotificationsModule')
  notificationStore!: NotificationsModule

  get name() {
    return this.notificationStore.typesCount[this.code]?.name
  }

  get isTypeEnabled(): boolean {
    return !this.notificationStore.excludedCodes.includes(this.code)
  }

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

  get isEnabledPopupType(): boolean {
    return !this.notificationStore.excludedPopupCodes.includes(this.code)
  }

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