<template>
  <div class="rounded-lg border border-base-300 bg-base-100/80 p-3 space-y-3">
    <label class="flex items-start gap-3">
      <input
        v-model="selection.components[component.id]"
        type="checkbox"
        class="checkbox checkbox-primary mt-1"
      >
      <div class="flex-1">
        <p class="font-medium">{{ component.name }}</p>
        <p v-if="component.reference" class="text-xs text-base-content/60">
          {{ component.reference }}
        </p>
      </div>
    </label>

    <div v-if="childPieces.length" class="pl-6 space-y-2">
      <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">
        Pièces
      </p>
      <label
        v-for="piece in childPieces"
        :key="piece.id"
        class="flex items-start gap-3"
      >
        <input
          v-model="selection.pieces[piece.id]"
          type="checkbox"
          class="checkbox checkbox-secondary mt-1"
        >
        <div>
          <p class="font-medium">{{ piece.name }}</p>
          <p class="text-xs text-base-content/60">
            {{ piece.reference || 'Référence inconnue' }}
          </p>
        </div>
      </label>
    </div>

    <div v-if="childComponents.length" class="pl-6 space-y-3 border-l border-base-200">
      <MachinePrintSelectionNode
        v-for="child in childComponents"
        :key="child.id"
        :component="child"
        :selection="selection"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

defineOptions({ name: 'MachinePrintSelectionNode' })

const props = defineProps({
  component: { type: Object, required: true },
  selection: { type: Object, required: true }
})

const childComponents = computed(() => props.component.subComponents || [])
const childPieces = computed(() => props.component.pieces || [])
</script>
