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

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

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

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

// Map options to items format expected by UCheckboxGroup
const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))

// Model value is an array of labels for checkboxes where value === 'true'
const modelValue = computed({
  get: () => props.formOptions.filter((option) => option.value === 'true').map((option) => option.label),
  set: (selectedLabels: string[]) => {
    const updatedModelValue = props.formOptions.map((option) => ({
      ...option,
      value: selectedLabels.includes(option.label) ? 'true' : 'false'
    }))
    emit('update:formOptions', updatedModelValue)
  }
})
</script>
