import { reaction } from '@formily/reactive';
import cls from 'classnames';
import { useDesigner, usePrefix, useViewport } from '../../hooks';
import { Selector } from './Selector';
import { Copy } from './Copy';
import { Delete } from './Delete';
import { composeExport } from '@jeamn/formily-components/src/__builtins__';
import { defineComponent, nextTick, ref, unref } from 'vue-demi';
import { useEffect } from '../../shared/useEffect';
import { DragHandler } from './DragHandler';
var HELPER_DEBOUNCE_TIMEOUT = 100;
var HelpersComponent = defineComponent({
    name: 'Helpers',
    props: ['node', 'nodeRect'],
    emits: ['click'],
    setup: function (props, _a) {
        var prefixRef = usePrefix('aux-helpers');
        var designerRef = useDesigner();
        var viewportRef = useViewport();
        var unmountRef = ref(false);
        var refContainer = ref();
        var position = ref('top-right');
        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);
            };
            nextTick(function () {
                update();
            });
            return 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={cls(prefixRef.value, (_a = {},
                    _a[unref(position)] = true,
                    _a))} ref={refContainer} onClick={function (e) { return e.stopPropagation(); }}>
          <div class={cls(prefixRef.value + '-content')}>
            <Selector node={node}/>
            {(node === null || node === void 0 ? void 0 : node.allowClone()) === false ? null : <Copy node={node}/>}
            {(node === null || node === void 0 ? void 0 : node.allowDrag()) === false ? null : <DragHandler node={node}/>}
            {(node === null || node === void 0 ? void 0 : node.allowDelete()) === false ? null : <Delete node={node}/>}
          </div>
        </div>);
        };
    },
});
export var Helpers = composeExport(HelpersComponent, {
    displayName: 'Helpers',
});
//# sourceMappingURL=Helpers.jsx.map