import { useOutlineDragon, 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 const Insertion: React.FC<IInsertionProps> = observer(({ workspaceId }) => {
//   const outlineDragon = useOutlineDragon(workspaceId)
//   const prefix = usePrefix('outline-tree-insertion')
//   const createInsertionStyle = (): React.CSSProperties => {
//     const closestDirection = outlineDragon.closestDirection
//     const closestRect = outlineDragon.closestOffsetRect
//     const baseStyle: React.CSSProperties = {
//       position: 'absolute',
//       transform: 'perspective(1px) translate3d(0,0,0)',
//       top: 0,
//       left: 0,
//     }
//     if (!closestRect) return baseStyle
//     if (
//       closestDirection === ClosestPosition.After ||
//       closestDirection === ClosestPosition.InnerAfter ||
//       closestDirection === ClosestPosition.Under ||
//       closestDirection === ClosestPosition.ForbidAfter ||
//       closestDirection === ClosestPosition.ForbidInnerAfter ||
//       closestDirection === ClosestPosition.ForbidUnder
//     ) {
//       baseStyle.width = closestRect.width
//       baseStyle.height = 2
//       baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y + closestRect.height - 2}px,0)`
//     } else if (
//       closestDirection === ClosestPosition.Before ||
//       closestDirection === ClosestPosition.InnerBefore ||
//       closestDirection === ClosestPosition.Upper ||
//       closestDirection === ClosestPosition.ForbidBefore ||
//       closestDirection === ClosestPosition.ForbidInnerBefore ||
//       closestDirection === ClosestPosition.ForbidUpper
//     ) {
//       baseStyle.width = closestRect.width
//       baseStyle.height = 2
//       baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`
//     }
//     if (closestDirection.includes('FORBID')) {
//       baseStyle.backgroundColor = 'red'
//     } else {
//       baseStyle.backgroundColor = ''
//     }
//     return baseStyle
//   }
//   if (!outlineDragon?.closestNode) return null
//   return <div className={prefix} style={createInsertionStyle()}></div>
// })
var InsertionComponent = defineComponent({
    props: ['workspaceId'],
    setup: function (props) {
        var outlineDragonRef = useOutlineDragon(props.workspaceId);
        var prefixRef = usePrefix('outline-tree-insertion');
        return function () {
            var outlineDragon = outlineDragonRef.value;
            var prefix = prefixRef.value;
            var createInsertionStyle = function () {
                var closestDirection = outlineDragon.closestDirection;
                var closestRect = outlineDragon.closestOffsetRect;
                var baseStyle = {
                    position: 'absolute',
                    transform: 'perspective(1px) translate3d(0,0,0)',
                    top: 0,
                    left: 0,
                };
                if (!closestRect)
                    return baseStyle;
                if (closestDirection === ClosestPosition.After ||
                    closestDirection === ClosestPosition.InnerAfter ||
                    closestDirection === ClosestPosition.Under ||
                    closestDirection === ClosestPosition.ForbidAfter ||
                    closestDirection === ClosestPosition.ForbidInnerAfter ||
                    closestDirection === ClosestPosition.ForbidUnder) {
                    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.Before ||
                    closestDirection === ClosestPosition.InnerBefore ||
                    closestDirection === ClosestPosition.Upper ||
                    closestDirection === ClosestPosition.ForbidBefore ||
                    closestDirection === ClosestPosition.ForbidInnerBefore ||
                    closestDirection === ClosestPosition.ForbidUpper) {
                    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';
                }
                else {
                    baseStyle.backgroundColor = '';
                }
                Object.keys(baseStyle).forEach(function (key) {
                    var value = baseStyle[key];
                    isNum(value) && (baseStyle[key] = value + 'px');
                });
                return baseStyle;
            };
            if (!(outlineDragon === null || outlineDragon === void 0 ? void 0 : outlineDragon.closestNode))
                return null;
            return <div class={prefix} style={createInsertionStyle()}></div>;
        };
    },
});
export var Insertion = composeExport(observer(InsertionComponent), {
    displayName: 'Insertion',
});
//# sourceMappingURL=Insertion.jsx.map