import { GlobalRegistry } from '@designable/core';
import { DesignerEngineSymbol } from '../context';
import { GhostWidget } from '../widgets';
import { useDesigner } from '../hooks/useDesigner';
import { Layout } from './Layout';
import * as icons from '../icons';
import { defineComponent, onBeforeUnmount, provide, ref, toRef, watchEffect, } from 'vue-demi';
GlobalRegistry.registerDesignerIcons(icons);
export var Designer = defineComponent({
    props: {
        engine: {
            type: Object,
        },
        theme: { type: String, default: 'light' },
        prefixCls: { type: String, default: 'dn-' },
        variables: { type: Object, default: function () { } }
    },
    setup: function (props, _a) {
        var slots = _a.slots;
        var engine = useDesigner();
        var refInstance = ref(null);
        provide(DesignerEngineSymbol, toRef(props, 'engine'));
        watchEffect(function () {
            if (props.engine) {
                if (props.engine && refInstance.value) {
                    if (props.engine !== refInstance.value) {
                        refInstance.value.unmount();
                    }
                }
                props.engine.mount();
                refInstance.value = props.engine;
            }
        });
        onBeforeUnmount(function () {
            if (props.engine) {
                props.engine.unmount();
            }
        });
        if (engine.value)
            throw new Error('There can only be one Designable Engine Context');
        return function () {
            var _a;
            return (<Layout {...{ theme: props.theme, prefixCls: props.prefixCls }}>
          {(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)}
          <GhostWidget />
        </Layout>);
        };
    },
});
//# sourceMappingURL=Designer.jsx.map