import { createApp, h } from 'vue'

export function createVueControlSmart(component, props = {}, events = {}) {
    let vueApp = null

    return {
        name: props.name || 'vue-control',
        index: props.index || 0,
        position: props.position || 'left',
        html: `<div class="vue-control-wrapper" data-vue-control="${component.name}"></div>`,
        tooltip: props.tooltip || '',

        mounted: function ($control) {
            const container = $control.querySelector('.vue-control-wrapper')

            if (container && !vueApp) {

                console.log("111")
                vueApp = createApp({
                    render() {
                        return h(component, {
                            ...props,
                            ...Object.entries(events).reduce((acc, [eventName, handler]) => {
                                acc[`on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = handler
                                return acc
                            }, {})
                        })
                    }
                })

                vueApp.mount(container)
                $control._vueApp = vueApp
            }
        },

        destroy: function ($control) {
            if ($control._vueApp) {
                $control._vueApp.unmount()
                $control._vueApp = null
                vueApp = null
            }
        }
    }
}