<template>
  <div>
    <ComponentRenderer
        :availableComponents="availableComponents"
        :components="formattedComponents"
    />

    <AddComponentButton
        :availableComponents="availableComponents"
        @componentAdded="addComponent"
    />

    <textarea
        :name="name"
        :value="JSON.stringify(formattedComponents)"
        class="hidden"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";
import AddComponentButton from "./components/AddComponentButton.vue";
import ComponentRenderer from "./components/ComponentRenderer.vue";

const props = defineProps({
  availableComponents: {
    type: Array,
    default: () => []
  },
  components: {
    type: Array,
    default: () => []
  },
  name: {
    type: String,
    default: 'components'
  }
});

const formattedComponents = ref(props.components)

const addComponent = (component) => {
  formattedComponents.value.push(component)
}
</script>