<template>
  <q-toggle
    v-on="$listeners"
    v-bind="$attrs"
    :label="label"
    :left-label="leftLabel"
    color="accent"
    checked-icon="la la-check"
    unchecked-icon="la la-close"
    class="text-blue-grey"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QToggle } from 'quasar'

@Component({ inheritAttrs: false, components: { QToggle } })
export default class UiToggle extends Vue {
  @Prop(Object) labels!: { on: string; off: string }

  @Prop(Boolean) leftLabel?: boolean

  get label(): string | undefined {
    if (!this.labels) {
      return undefined
    }

    return this.$attrs.value ? this.labels.on : this.labels.off
  }
}
</script>
