"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Helpers = void 0;
var reactive_1 = require("@formily/reactive");
var classnames_1 = __importDefault(require("classnames"));
var hooks_1 = require("../../hooks");
var Selector_1 = require("./Selector");
var Copy_1 = require("./Copy");
var Delete_1 = require("./Delete");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var vue_demi_1 = require("vue-demi");
var useEffect_1 = require("../../shared/useEffect");
var DragHandler_1 = require("./DragHandler");
var HELPER_DEBOUNCE_TIMEOUT = 100;
var HelpersComponent = (0, vue_demi_1.defineComponent)({
    name: 'Helpers',
    props: ['node', 'nodeRect'],
    emits: ['click'],
    setup: function (props, _a) {
        var prefixRef = (0, hooks_1.usePrefix)('aux-helpers');
        var designerRef = (0, hooks_1.useDesigner)();
        var viewportRef = (0, hooks_1.useViewport)();
        var unmountRef = (0, vue_demi_1.ref)(false);
        var refContainer = (0, vue_demi_1.ref)();
        var position = (0, vue_demi_1.ref)('top-right');
        (0, useEffect_1.useEffect)(function () {
            var request;
            var getYInViewport = function (nodeRect, helpersRect) {
                if (nodeRect.top - viewportRef.value.scrollY > helpersRect.height) {
                    return 'top';
                }
                else if (viewportRef.value.isScrollTop &&
                    nodeRect.height + helpersRect.height > viewportRef.value.height) {
                    return 'inner-top';
                }
                else if (viewportRef.value.isScrollBottom &&
                    nodeRect.height + helpersRect.height > viewportRef.value.height) {
                    return 'inner-bottom';
                }
                return 'bottom';
            };
            var getXInViewport = function (nodeRect, helpersRect) {
                var widthDelta = helpersRect.width - nodeRect.width;
                if (widthDelta >= 0) {
                    if (nodeRect.x < widthDelta) {
                        return 'left';
                    }
                    else if (nodeRect.right + widthDelta > viewportRef.value.width) {
                        return 'right';
                    }
                    else {
                        return 'center';
                    }
                }
                return 'right';
            };
            var update = function () {
                var _a;
                var nodeRect = props.nodeRect;
                var ref = refContainer;
                var helpersRect = (_a = ref.value) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
                if (!helpersRect || !nodeRect)
                    return;
                if (unmountRef.value)
                    return;
                position.value =
                    getYInViewport(nodeRect, helpersRect) +
                        '-' +
                        getXInViewport(nodeRect, helpersRect);
            };
            (0, vue_demi_1.nextTick)(function () {
                update();
            });
            return (0, reactive_1.reaction)(function () { return [
                viewportRef.value.width,
                viewportRef.value.height,
                viewportRef.value.scrollX,
                viewportRef.value.scrollY,
                viewportRef.value.isScrollBottom,
                viewportRef.value.isScrollTop,
            ]; }, function () {
                clearTimeout(request);
                request = setTimeout(update, HELPER_DEBOUNCE_TIMEOUT);
            });
        }, function () { return [viewportRef.value, props.nodeRect]; });
        return function () {
            var _a;
            var node = props.node;
            var nodeRect = props.nodeRect;
            var designer = designerRef.value;
            if (!nodeRect || !node)
                return null;
            return (<div class={(0, classnames_1.default)(prefixRef.value, (_a = {},
                    _a[(0, vue_demi_1.unref)(position)] = true,
                    _a))} ref={refContainer} onClick={function (e) { return e.stopPropagation(); }}>
          <div class={(0, classnames_1.default)(prefixRef.value + '-content')}>
            <Selector_1.Selector node={node}/>
            {(node === null || node === void 0 ? void 0 : node.allowClone()) === false ? null : <Copy_1.Copy node={node}/>}
            {(node === null || node === void 0 ? void 0 : node.allowDrag()) === false ? null : <DragHandler_1.DragHandler node={node}/>}
            {(node === null || node === void 0 ? void 0 : node.allowDelete()) === false ? null : <Delete_1.Delete node={node}/>}
          </div>
        </div>);
        };
    },
});
exports.Helpers = (0, __builtins__1.composeExport)(HelpersComponent, {
    displayName: 'Helpers',
});
//# sourceMappingURL=Helpers.jsx.map