<template>
  <q-tr :props="$attrs.props" no-hover>
    <q-td>{{ label }}</q-td>
    <q-td>
      {{ value }} {{ measureUnit }}
      <q-popup-edit @save="save" v-model.number="model">
        <q-input v-model.number="model" autofocus style="width: 80px" />
      </q-popup-edit>
    </q-td>
  </q-tr>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue, Watch } from 'vue-property-decorator'
import { QInput, QPopupEdit, QTd, QTr } from 'quasar'
import { UiToggle } from '@/lib-components'
import { NotificationsConfigModule } from '@/widgets'

@Component({
  inheritAttrs: false,
  components: { UiToggle, QTr, QTd, QPopupEdit, QInput },
})
export default class UiNotificationsWidgetConfigItem extends Vue {
  @Prop(String) label!: string
  @Prop(String) type!: 'count' | 'duration'

  @Inject('NotificationsConfigModule')
  notificationConfigStore!: NotificationsConfigModule

  model = 1

  get value(): number {
    return this.type === 'count'
      ? this.notificationConfigStore?.notificationsCount || 0
      : this.notificationConfigStore?.notificationDuration || 0
  }

  get measureUnit(): string {
    return this.type === 'count' ? 'шт' : 'cек'
  }

  save(value: number) {
    this.type === 'count'
      ? this.notificationConfigStore?.setNotificationCount(value)
      : this.notificationConfigStore?.setNotificationDuration(value)
  }

  @Watch('value', { immediate: true })
  updateModel(value: number) {
    this.model = value
  }
}
</script>
