import * as React from 'react';
import { useDebugCtx } from './context';
import { DebugLabel } from '../../components/DebugLabel';
import { SliceTypeName } from '../../../json-crdt-extensions';
import { useSyncStore } from '../../web/react/hooks';
export const RenderInline = (props) => {
    const { children, inline } = props;
    const ctx = useDebugCtx();
    const enabled = useSyncStore(ctx.state.enabled);
    const showSliceOutlines = useSyncStore(ctx.state.showSliceOutlines);
    const showSliceInfo = useSyncStore(ctx.state.showSliceInfo);
    const keys = Object.keys(inline.attr());
    const tags = [];
    const length = keys.length;
    let _hasCursor = false;
    for (let i = 0; i < length; i++) {
        let tag = keys[i];
        if (typeof tag === 'string' && Number(tag) + '' === tag)
            tag = Number(tag);
        if (tag === -1 /* SliceTypeCon.Cursor */) {
            _hasCursor = true;
            continue;
        }
        tag = SliceTypeName[tag] ?? tag + '';
        tag = '<' + tag + '>';
        tags.push(tag);
    }
    if (!enabled)
        return children;
    return (React.createElement("span", { style: { outline: showSliceOutlines ? '1px dotted red' : undefined, position: 'relative' } },
        showSliceInfo && tags.length > 0 && (React.createElement("span", { contentEditable: false, style: { position: 'absolute', top: -6, left: -3, userSelect: 'none', pointerEvents: 'none' } },
            React.createElement(DebugLabel, { small: true }, tags.join(', ')))),
        children));
};
//# sourceMappingURL=RenderInline.js.map