//@ts-nocheck
import { createApp, defineComponent, h, onBeforeUpdate, onMounted, ref } from 'vue'

// eslint-disable-next-line vue/one-component-per-file
export default defineComponent({
    name: 'RenderToIFrame',
    props: {
        css: {
            type: String,
            default: '',
        },
    },
    setup(props, { slots }) {
        const iframeRef = ref<HTMLElement | null>(null)
        const iframeBody = ref<HTMLElement | null>(null)
        const iframeHead = ref(null)
        const iframeStyle = ref(null)
        let iframeApp = null

        onMounted(() => {
            iframeBody.value = iframeRef.value.contentDocument.body
            iframeHead.value = iframeRef.value.contentDocument.head
            const el = document.createElement('div')
            iframeRef.value?.classList.add('playground-iframe')
            el.id = 'app'
            iframeBody.value.appendChild(el)
            iframeStyle.value = document.createElement('style')
            iframeStyle.value.innerHTML = props.css
            iframeHead.value.appendChild(iframeStyle.value)

            // eslint-disable-next-line vue/one-component-per-file
            iframeApp = createApp({
                name: 'IframeRender',
                setup() {
                    return () => slots.default()
                },
            }).mount(el)
        })
        onBeforeUpdate(() => {
            if (!iframeApp || !iframeRef.value) {
                return
            }
            if (props.css) {
                iframeStyle.value.innerHTML = props.css
            }
        })
        return () => h('iframe', { ref: iframeRef })
    },
})