<template>

  <fieldset>
    <slot />
  </fieldset>

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

let globalRadioGroupId = 0;

export default @Component({
  name: 'itfRadioGroup',
  provide() {
    return { radioGroup: this }; // do not use Provide from vue-property-decorator
  }
})
class itfRadioGroup extends Vue {
  @Model('input', { default: null }) value;

  @Prop(Boolean) disabled;

  @Prop(String) itemKey;

  @Prop(Number) max;

  created() {
    globalRadioGroupId += 1;
    this.id = `radio-group-${globalRadioGroupId}`;
  }

  getGroupName() {
    return this.id;
  }

  onToggleOption(value, isChecked) {
    this.$emit('input', value);
  }

  isChecked(value) {
    if (this.itemKey) {
      return this.value[this.itemKey] === value[this.itemKey];
    }
    return this.value === value;
  }

  isDisabled() {
    return this.disabled;
  }
}
</script>
