<template>
  <q-toggle
    v-on="$listeners"
    v-bind="$attrs"
    :label="computedLabel"
    :left-label="leftLabel"
    :color="color"
    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(String) label?: string
  @Prop(Object) labels?: { on: string; off: string }

  @Prop(Boolean) leftLabel?: boolean
  @Prop({ type: Boolean, default: false }) secondary!: boolean

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

    return this.$attrs.value ? this.labels.on : this.labels.off
  }

  get color() {
    return this.secondary ? 'secondary' : 'accent'
  }
}
</script>
