import type { SvelteComponent } from "svelte"
import ContentBlock from "./lib/components/pagebuilder/ContentBlock.svelte"
import ColumnsColumn from "./lib/components/pagebuilder/blocks/ColumnsColumn.svelte"

function getRenderedElement(
    component: typeof SvelteComponent,
    options?: { props: { [key: string]: any }; addCss?: string[] },
    nestedElements?: { tagName: string; className?: string }[]
) {
    const el = document.createElement("div")
    el.attachShadow({ mode: "open" })

    const body = document.createElement("body")

    // build nested divs with css classes
    let target: HTMLElement = body
    nestedElements?.forEach((e) => {
        const newElement = document.createElement(e.tagName)
        if (e.className) newElement.className = e.className
        target.appendChild(newElement)
        target = newElement
    })

    el.shadowRoot.appendChild(body)

    options?.addCss?.forEach((css) => {
        const link = document.createElement("link")
        link.rel = "stylesheet"
        link.href = css
        link.type = "text/css"
        el.shadowRoot.appendChild(link)
    })

    new component({
        target: target,
        props: options?.props,
    })

    return el
}

export { ContentBlock, ColumnsColumn, getRenderedElement }