import { defineComponent, h, renderSlot, type PropType } from "vue";
import { ElCollapseItem } from "element-plus";
import { type ComponentSchema } from "@/components/EpicDesigner/types/epic-designer";
export default defineComponent({
    props: {
        componentSchema: {
            type: Object as PropType<ComponentSchema>,
            require: true,
            default: () => ({})
        }
    },
    setup(props, { slots }) {
        return () => {
            const componentSchema = {
                ...props.componentSchema,
                title: props.componentSchema?.label ?? ""
            } as any;
            const children = componentSchema.children;
            delete componentSchema.children;

            return h(ElCollapseItem, componentSchema, {
                default: () =>
                    renderSlot(slots, "edit-node", {}, () =>
                        children.map((subcomponentSchema: ComponentSchema) =>
                            renderSlot(slots, "node", { componentSchema: subcomponentSchema })
                        )
                    )
            });
        };
    }
});
