<template>
  <field v-bind="$props">
    <span class="input-checkbox-group-caption-wrapper" :class="align">
      <BmsInputCheckboxCaption
        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"
      />
    </span>
  </field>
</template>

<script lang="ts" setup>
import { Ref, computed, ref } from 'vue';
import { v4 as uuid } from 'uuid';
import { BmsInputCheckboxCaptionGroupOption } from '@/models';
import { Caption } from '@/models/caption.model';
import BmsInputCheckboxCaption from './BmsInputCheckboxCaption.vue';

export interface Props {
  options?: BmsInputCheckboxCaptionGroupOption[];
  modelValue: any[];
  label?: string;
  required?: boolean;
  optional?: boolean;
  disabled?: boolean;
  helperText?: string;
  captions?: (string | Caption)[];
  errors?: (string | Caption)[];
  align?: 'row' | 'column';
}

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

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-checkbox-group-caption-wrapper {
  display: flex;
  gap: 1em;
  flex-direction: row;

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