"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OutlineTreeNode = void 0;
var core_1 = require("@designable/core");
var shared_1 = require("@designable/shared");
var reactive_1 = require("@formily/reactive");
var reactive_vue_1 = require("@formily/reactive-vue");
var hooks_1 = require("../../hooks");
var IconWidget_1 = require("../IconWidget");
var NodeTitleWidget_1 = require("../NodeTitleWidget");
var context_1 = require("./context");
var classnames_1 = __importDefault(require("classnames"));
require("./styles.less");
var formily_prototypes_1 = require("@jeamn/formily-prototypes");
var vue_demi_1 = require("vue-demi");
exports.OutlineTreeNode = (0, reactive_vue_1.observer)((0, vue_demi_1.defineComponent)({
    name: 'OutlineTreeNode',
    props: ['workspaceId', 'node', 'className'],
    inheritAttrs: false,
    setup: function (props, _a) {
        var style = (0, formily_prototypes_1.useStyle)();
        var prefix = (0, hooks_1.usePrefix)('outline-tree-node');
        var engine = (0, hooks_1.useDesigner)();
        var refInstance = (0, vue_demi_1.ref)();
        var ctx = (0, formily_prototypes_1.useContext)(context_1.NodeSymbol);
        var cursor = (0, hooks_1.useCursor)();
        var selection = (0, hooks_1.useSelection)(props.workspaceId);
        var outlineDragon = (0, hooks_1.useOutlineDragon)(props.workspaceId);
        var request = (0, vue_demi_1.ref)();
        // [node, outlineDragon, cursor]
        var unSub = [];
        (0, vue_demi_1.onMounted)(function () {
            var ref = refInstance;
            var subcb = engine.value.subscribeTo(core_1.DragMoveEvent, function () {
                var _a, _b, _c;
                var closestNodeId = (_b = (_a = outlineDragon.value) === null || _a === void 0 ? void 0 : _a.closestNode) === null || _b === void 0 ? void 0 : _b.id;
                var closestDirection = (_c = outlineDragon.value) === null || _c === void 0 ? void 0 : _c.closestDirection;
                var id = props.node.id;
                if (!ref.value)
                    return;
                if (closestNodeId === id &&
                    closestDirection === core_1.ClosestPosition.Inner) {
                    if (!ref.value.classList.contains('droppable')) {
                        ref.value.classList.add('droppable');
                    }
                    if (!ref.value.classList.contains('expanded')) {
                        if (request.value) {
                            clearTimeout(request.value);
                            request.value = undefined;
                        }
                        request.value = setTimeout(function () {
                            var _a;
                            (_a = ref.value) === null || _a === void 0 ? void 0 : _a.classList.add('expanded');
                        }, 600);
                    }
                }
                else {
                    if (request.value) {
                        clearTimeout(request.value);
                        request.value = undefined;
                    }
                    if (ref.value.classList.contains('droppable')) {
                        ref.value.classList.remove('droppable');
                    }
                }
            });
            unSub.push(subcb);
            //[node, selection]
            var subcb2 = (0, reactive_1.autorun)(function () {
                var _a, _b, _c;
                var selectedIds = ((_a = selection.value) === null || _a === void 0 ? void 0 : _a.selected) || [];
                var id = props.node.id;
                if (!ref.value)
                    return;
                if (selectedIds.includes(id)) {
                    if (!ref.value.classList.contains('selected')) {
                        ref.value.classList.add('selected');
                    }
                }
                else {
                    if (ref.value.classList.contains('selected')) {
                        ref.value.classList.remove('selected');
                    }
                }
                if (cursor.value.status === core_1.CursorStatus.Dragging &&
                    ((_c = (_b = outlineDragon.value) === null || _b === void 0 ? void 0 : _b.dragNodes) === null || _c === void 0 ? void 0 : _c.length)) {
                    if (ref.value.classList.contains('selected')) {
                        ref.value.classList.remove('selected');
                    }
                }
            });
            unSub.push(subcb2);
        });
        (0, vue_demi_1.onBeforeUnmount)(function () {
            unSub.forEach(function (cb) { return cb(); });
        });
        var renderIcon = function (node) {
            var _a;
            var icon = node.designerProps.icon;
            if (icon) {
                return <IconWidget_1.IconWidget infer={icon} size={'12px'}/>;
            }
            if (node === (node === null || node === void 0 ? void 0 : node.root)) {
                return <IconWidget_1.IconWidget infer="Page" size={'12px'}/>;
            }
            else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
                return <IconWidget_1.IconWidget infer="Container" size={'12px'}/>;
            }
            return <IconWidget_1.IconWidget infer="Component" size={'12px'}/>;
        };
        var renderActions = function (node) {
            if ((0, shared_1.isFn)(ctx.value.renderActions))
                return ctx.value.renderActions(node);
        };
        var renderTitle = function (node) {
            // TODO::判断renderTitle是不是VNode或者函数
            if ((0, shared_1.isFn)(ctx.value.renderTitle))
                return ctx.value.renderTitle(node);
            return (<span>
                        <NodeTitleWidget_1.NodeTitleWidget node={node}/>
                    </span>);
        };
        return function () {
            var _a, _b;
            var node = props.node;
            var ref = refInstance.value;
            if (!node)
                return null;
            return (<div style={style} ref={refInstance} class={(0, classnames_1.default)(prefix.value, props.className, 'expanded')} data-designer-outline-node-id={node.id}>
                        <div class={prefix.value + '-header'}>
                            <div class={prefix.value + '-header-head'} style={{
                    left: -node.depth * 16 + 'px',
                    width: node.depth * 16 + 'px',
                }}></div>
                            <div class={prefix.value + '-header-content'}>
                                <div class={prefix.value + '-header-base'}>
                                    {(((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) > 0 || node === node.root) && (<div class={prefix.value + '-expand'} onClick={function (e) {
                        var _a;
                        e.preventDefault();
                        e.stopPropagation();
                        if ((_a = ref === null || ref === void 0 ? void 0 : ref.classList) === null || _a === void 0 ? void 0 : _a.contains('expanded')) {
                            ref === null || ref === void 0 ? void 0 : ref.classList.remove('expanded');
                        }
                        else {
                            ref === null || ref === void 0 ? void 0 : ref.classList.add('expanded');
                        }
                    }}>
                                            <IconWidget_1.IconWidget infer="Expand" size={10}/>
                                        </div>)}
                                    <div class={prefix.value + '-icon'}>{renderIcon(node)}</div>
                                    <div class={prefix.value + '-title'}>{renderTitle(node)}</div>
                                </div>
                                <div class={prefix.value + '-header-actions'} data-click-stop-propagation>
                                    {renderActions(node)}
                                    {node !== node.root && (<IconWidget_1.IconWidget key={node.hidden ? 'EyeClose' : 'Eye'} class={(0, classnames_1.default)(prefix.value + '-hidden-icon', {
                        hidden: node.hidden,
                    })} infer={node.hidden ? 'EyeClose' : 'Eye'} size={14} onClick={function () {
                        node.hidden = !node.hidden;
                    }}/>)}
                                </div>
                            </div>
                        </div>
                        <div class={prefix.value + '-children'}>
                            {(_b = node.children) === null || _b === void 0 ? void 0 : _b.map(function (child) {
                    return (<exports.OutlineTreeNode node={child} key={child.id} workspaceId={props.workspaceId}/>);
                })}
                        </div>
                    </div>);
        };
    },
}));
//# sourceMappingURL=OutlineNode.jsx.map