<template>
  <base-checkbox :value="boolValue" :disabled="disabled" @input="onInput" />
</template>

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

import BaseCheckbox from '../../elements/checkbox/BaseCheckbox.vue'
import InputEvent from '../../core/events/InputEvent'

@Component({
  name: 'base-string-checkbox',
  components: {
    BaseCheckbox
  }
})
export default class BaseCheckInput extends Vue {
  @Prop({ default: false }) value!: string
  @Prop({ default: false }) disabled!: boolean

  get boolValue () {
    return this.value === 'true'
  }

  onInput ($event: InputEvent<boolean>) {
    const event = new InputEvent<string>()
    event.value = $event.value!.toString()
    this.$emit('input', event)
  }
}
</script>
