<script setup lang="ts">
import { ref, watch, shallowRef, type PropType } from 'vue';

const props = defineProps({
  checkBoxForm: {
    type: Object as PropType<{
      checkBoxField: { label: string };
      fields: Record<string, {
        label: string;
        component: any;
        value: any;
        disabled: boolean;
        props?: Record<string, any>;
      }>;
    }>,
    required: true,
  },
  value: {
    type: Boolean,
    required: true,
  },
});

// Reactive state for the checkbox and nested fields
const isChecked = ref(props.value);
// TODO performance issue by using ref, but losing connectivity to main data struct if not
// Either cycle trough each field and add it to a ref var, so its value is updated but the rest is not tracked
const fields = ref(props.checkBoxForm.fields);

// Watch for changes in the checkbox state and update the disabled state of nested fields
watch(isChecked, (isChecked) => {
  for (const key in fields.value) {
    fields.value[key].disabled = !isChecked;
  }
});
</script>

<template>
  <v-card>
    <v-card-text>
      <!-- Checkbox to toggle nested fields -->
      <v-checkbox
          :label="props.checkBoxForm.checkBoxField.label"
          v-model="isChecked"
      ></v-checkbox>

      <!-- Dynamically render nested fields -->
      <template v-for="(field, key) in fields" :key="key">
        <component
            :is="field.component"
            v-model="field.value"
            :label="field.label"
            :disabled="field.disabled"
            :density="'compact'"
            rows="2"
            item-title="type_name"
            hide-details="auto"
            class="mb-2"
            clearable
            :active="true"
            v-bind="field.props || {}"
        />
      </template>
    </v-card-text>
  </v-card>
</template>

<style scoped></style>
