<template>
  <div class="space-y-4">
    <!-- Root Components -->
    <div v-for="component in components" :key="component.id" class="border border-gray-200 rounded-lg p-4">
      <ComponentItem 
        :component="component"
        :is-edit-mode="isEditMode"
        :collapse-all="collapseAll"
        :toggle-token="toggleToken"
        :component-model-options="componentModelOptionsProvider(component)"
        :component-model-options-provider="componentModelOptionsProvider"
        :piece-model-options-provider="pieceModelOptionsProvider"
        @update="$emit('update', $event)"
        @edit-piece="$emit('edit-piece', $event)"
        @assign-model="$emit('assign-model', $event)"
        @assign-piece-model="$emit('assign-piece-model', $event)"
        @custom-field-update="$emit('custom-field-update', $event)"
        @create-model-from-component="$emit('create-model-from-component', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import ComponentItem from './ComponentItem.vue'

defineProps({
  components: {
    type: Array,
    required: true
  },
  isEditMode: {
    type: Boolean,
    default: false
  },
  collapseAll: {
    type: Boolean,
    default: true
  },
  toggleToken: {
    type: Number,
    default: 0
  },
  componentModelOptionsProvider: {
    type: Function,
    default: () => [],
  },
  pieceModelOptionsProvider: {
    type: Function,
    default: () => [],
  },
})

defineEmits(['update', 'edit-piece', 'assign-model', 'assign-piece-model', 'custom-field-update', 'create-model-from-component'])
</script> 
