<template>
  <URadioGroup v-model="modelValue" :items="items" />
</template>

<script setup lang="ts">
import type { FormOptionDto } from '~/.api-client'

const props = defineProps<{
  label?: string
  formOptions: FormOptionDto[]
}>()

const emit = defineEmits<{
  (e: 'update:formOptions', value: FormOptionDto[]): void
}>()

// Our "label" is the "value" of the radio button
const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
const currentSelectedValue = ref(undefined)

const modelValue = computed({
  get: () => currentSelectedValue.value,
  set: (val) => {
    if (val) {
      const updatedModelValue = [...props.formOptions]
      updatedModelValue.forEach((option) => {
        option.value = option.label === val ? 'true' : 'false'
      })
      emit('update:formOptions', updatedModelValue)
    }
  }
})
</script>
