<template>

  <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
    <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
    <label :for="id" class="form-check-label" :class="{ 'disabled': isDisabled }">
      <slot name="label">
        {{label}}
        <slot name="icon"></slot>
      </slot>
    </label>
    <slot name="after-label"></slot>
  </div>

</template>
<script>
import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';

let globalCheckboxId = 0;

export default @Component({
  name: 'itfCheckbox',
  components: {
  }
})
class itfCheckbox extends Vue {
  @Inject({ default: null }) checkboxGroup;

  @Model('input') value;
  @Prop(String) label;

  @Prop(Boolean) switch;
  @Prop(Boolean) disabled;
  @Prop(Boolean) medium;
  @Prop(Boolean) large;
  @Prop(Boolean) ungrouped;

  id = '';

  created() {
    globalCheckboxId += 1;
    this.id = `checkbox${globalCheckboxId}`;
  }

  get isDisabled() {
    if (this.checkboxGroup && !this.ungrouped) {
      return this.disabled || this.checkboxGroup.isDisabled(this.value);
    }
    return this.disabled;
  }

  get isChecked() {
    if (this.checkboxGroup && !this.ungrouped) {
      return this.checkboxGroup.isChecked(this.value);
    }
    return this.value;
  }

  set isChecked(val) {
    if (this.checkboxGroup && !this.ungrouped) {
      this.checkboxGroup.onToggleOption(this.value, val);
    }
    this.$emit('input', val);
  }

  get input() {
    return this.$refs.input;
  }
}
</script>
