<template>
  <div class="form-check" :class="{ 'form-check-inline': inline, 'form-check-reverse': labelFirst, disabled }">
    <input
      class="form-check-input"
      type="radio"
      :checked="modelValue"
      :name="group"
      :id="id"
      :disabled="disabled"
      @change="onChanged()"
    />
    <label class="form-check-label" :for="id" v-if="!!label">
      {{ label }}
    </label>
  </div>
</template>

<script lang="ts">
import { useIds } from '@/composables';
const { getId } = useIds();
</script>

<script setup lang="ts">
const props = defineProps({
  group: {
    type: String,
    required: true,
  },
  label: String,
  modelValue: Boolean,
  id: {
    type: String,
    default: () => getId('checkbox'),
  },
  disabled: Boolean,
  labelFirst: Boolean,
  inline: Boolean,
});
const emit = defineEmits(['update:modelValue']);

const onChanged = () => {
  if (!props.disabled) {
    emit('update:modelValue', !props.modelValue);
  }
};
</script>
