<template>
  <field v-bind="$props">
    <span class="input-radio-group-caption-wrapper" :class="align">
      <slot>
        <BmsInputRadioCaption
          v-for="option in options"
          :key="option.value"
          v-model="inputValue"
          :value="option.value"
          :name="name"
          :label="option.label || option.value"
          :disabled="disabled"
          :required="required"
          :captions="option.captions"
        />
      </slot>
    </span>
  </field>
</template>

<script lang="ts" setup>
import { Ref, computed, ref } from 'vue';
import BmsInputRadioCaption from './BmsInputRadioCaption.vue';
import { v4 as uuid } from 'uuid';
import { BmsInputRadioCaptionGroupOption } from '@/models';
import { FieldComponentProps } from '@/plugins/field/field-component.model';

export interface Props extends FieldComponentProps {
  options?: BmsInputRadioCaptionGroupOption[];
  modelValue: any;
  align?: 'row' | 'column';
}

const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  align: 'row',
});

const name: Ref<string> = ref<string>('radio-group-caption-' + uuid());

const $emits = defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();

const inputValue = computed({
  get() {
    return props.modelValue;
  },
  set(val: any) {
    $emits('update:modelValue', val);
  },
});
</script>

<style lang="scss" scoped>
.input-radio-group-caption-wrapper {
  display: flex;
  gap: 1em;
  flex-direction: row;

  &.column {
    flex-direction: column;
  }
}
</style>
