import { useDragon, usePrefix } from '../../hooks';
import { ClosestPosition } from '@designable/core';
import { observer } from '@formily/reactive-vue';
import { composeExport } from '@jeamn/formily-components/src/__builtins__';
import { defineComponent } from 'vue-demi';
import { isNum } from '@designable/shared';
export var InsertionComponent = observer(defineComponent({
    name: 'Insertion',
    props: [],
    setup: function () {
        var viewportDragon = useDragon();
        var prefix = usePrefix('aux-insertion');
        return function () {
            var createInsertionStyle = function () {
                var closestDirection = viewportDragon.value.closestDirection;
                var closestRect = viewportDragon.value.closestOffsetRect;
                var isInlineLayout = viewportDragon.value.getClosestLayout() === 'horizontal';
                var baseStyle = {
                    position: 'absolute',
                    transform: 'perspective(1px) translate3d(0,0,0)',
                    top: 0,
                    left: 0,
                };
                if (!closestRect)
                    return baseStyle;
                if (closestDirection === ClosestPosition.Before ||
                    closestDirection === ClosestPosition.ForbidBefore) {
                    baseStyle.width = 2;
                    baseStyle.height = closestRect.height;
                    baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
                }
                else if (closestDirection === ClosestPosition.After ||
                    closestDirection === ClosestPosition.ForbidAfter) {
                    baseStyle.width = 2;
                    baseStyle.height = closestRect.height;
                    baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x + closestRect.width - 2, "px,").concat(closestRect.y, "px,0)");
                }
                else if (closestDirection === ClosestPosition.InnerAfter ||
                    closestDirection === ClosestPosition.Under ||
                    closestDirection === ClosestPosition.ForbidInnerAfter ||
                    closestDirection === ClosestPosition.ForbidUnder) {
                    if (isInlineLayout) {
                        baseStyle.width = 2;
                        baseStyle.height = closestRect.height;
                        baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x + closestRect.width - 2, "px,").concat(closestRect.y, "px,0)");
                    }
                    else {
                        baseStyle.width = closestRect.width;
                        baseStyle.height = 2;
                        baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y + closestRect.height - 2, "px,0)");
                    }
                }
                else if (closestDirection === ClosestPosition.InnerBefore ||
                    closestDirection === ClosestPosition.Upper ||
                    closestDirection === ClosestPosition.ForbidInnerBefore ||
                    closestDirection === ClosestPosition.ForbidUpper) {
                    if (isInlineLayout) {
                        baseStyle.width = 2;
                        baseStyle.height = closestRect.height;
                        baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
                    }
                    else {
                        baseStyle.width = closestRect.width;
                        baseStyle.height = 2;
                        baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
                    }
                }
                if (closestDirection.includes('FORBID')) {
                    baseStyle.backgroundColor = 'red';
                }
                Object.keys(baseStyle).forEach(function (key) {
                    var value = baseStyle[key];
                    isNum(value) && (baseStyle[key] = value + 'px');
                });
                return baseStyle;
            };
            return <div class={prefix.value} style={createInsertionStyle()}></div>;
        };
    },
}));
export var Insertion = composeExport(InsertionComponent, {
    displayName: 'Insertion',
});
//# sourceMappingURL=Insertion.jsx.map