import { defineComponent, provide, ref, watch, computed } from 'vue';
import { DesignerLayoutSymbol, useContext, } from '../context';
import { each } from '@designable/shared';
export var Layout = defineComponent({
    name: 'Layout',
    props: {
        theme: { type: String, default: 'light' },
        prefixCls: { type: String, default: 'dn-' },
        variables: { type: Object, default: function () { } },
        position: { type: String, default: 'fixed' }
    },
    setup: function (props, _a) {
        var slots = _a.slots;
        var layoutRef = useContext(DesignerLayoutSymbol);
        var containerRef = ref();
        watch(containerRef, function () {
            if (containerRef.value) {
                each(props.variables, function (value, key) {
                    var _a, _b;
                    (_b = (_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.setProperty("--".concat(key), value);
                });
            }
        });
        if (layoutRef.value) {
            return function () {
                var _a;
                return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
            };
        }
        provide(DesignerLayoutSymbol, computed(function () {
            return {
                theme: props.theme,
                prefixCls: props.prefixCls,
                position: props.position
            };
        }));
        return function () {
            var _a;
            var _b;
            return (<div ref={containerRef} class={_a = {},
                    _a["".concat(props.prefixCls, "app")] = true,
                    _a["".concat(props.prefixCls).concat(props.theme)] = props.theme,
                    _a}>
          {(_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots)}
        </div>);
        };
    },
});
//# sourceMappingURL=Layout.jsx.map