import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@mui/material';
import { Node, NodeViewWrapper, ReactNodeViewRenderer, } from '@tiptap/react';
const VariablePillComponent = ({ node }) => {
    const { label } = node.attrs;
    const dashIndex = label?.indexOf(' - ') ?? -1;
    const categoryPart = dashIndex !== -1 ? label.slice(0, dashIndex) : label;
    const fieldPart = dashIndex !== -1 ? label.slice(dashIndex + 3) : null;
    return (_jsx(NodeViewWrapper, { as: "span", style: { display: 'inline', lineHeight: 'inherit' }, children: _jsxs(Box, { component: "span", contentEditable: false, sx: {
                display: 'inline-flex',
                alignItems: 'center',
                backgroundColor: theme => theme.palette.new.background.elements.brand,
                color: theme => theme.palette.new.text.neutral.brand,
                border: '1px solid',
                borderColor: theme => theme.palette.new.border.neutral.brand,
                borderRadius: 1,
                px: 0.75,
                py: 0.125,
                fontSize: '0.85em',
                fontFamily: 'inherit',
                lineHeight: 'inherit',
                whiteSpace: 'nowrap',
                userSelect: 'all',
            }, children: [_jsx(Box, { component: "span", sx: { fontWeight: 'fontWeightSemiBold' }, children: categoryPart }), fieldPart != null && (_jsxs(Box, { component: "span", sx: { fontWeight: 'fontWeightRegular' }, children: [' - ', fieldPart] }))] }) }));
};
const VariablePill = Node.create({
    name: 'variablePill',
    group: 'inline',
    inline: true,
    atom: true,
    selectable: true,
    draggable: false,
    addAttributes() {
        return {
            token: { default: null },
            label: { default: null },
        };
    },
    parseHTML() {
        return [
            {
                tag: 'span[data-variable-token]',
                getAttrs: (dom) => ({
                    token: dom.getAttribute('data-variable-token'),
                    label: dom.getAttribute('data-variable-label') || dom.textContent || '',
                }),
            },
        ];
    },
    renderHTML({ node }) {
        const label = node.attrs.label || '';
        const attrs = {
            'data-variable-token': node.attrs.token,
            'data-variable-label': label,
            class: 'variable-pill',
        };
        const dashIndex = label.indexOf(' - ');
        if (dashIndex !== -1) {
            return [
                'span',
                attrs,
                ['span', { style: 'font-weight: 600' }, label.slice(0, dashIndex)],
                ` - ${label.slice(dashIndex + 3)}`,
            ];
        }
        return ['span', attrs, label];
    },
    addNodeView() {
        return ReactNodeViewRenderer(VariablePillComponent, {
            as: 'span',
            attrs: {
                style: 'display: inline;',
            },
        });
    },
});
export default VariablePill;
