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

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

export interface Props extends FieldComponentProps {
  values?: string[] | BmsInputRadioGroupOption[];
  modelValue: any;
  align?: 'row' | 'column';
}

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

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

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

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

const computedValues: ComputedRef<BmsInputRadioGroupOption[]> = computed(() => {
  return props.values.map((curValue) => {
    if (typeof curValue === 'string') {
      return {
        value: curValue,
        label: curValue,
      };
    }
    return curValue;
  });
});
</script>

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

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