import { HighlightStyle, syntaxHighlighting, } from '@codemirror/language';
import { EditorView } from '@codemirror/view';
import { CypherTokenType } from '@neo4j-cypher/language-support';
import { tokenTypeToStyleTag } from './constants';
import { byWordSvg, caseSensitiveSvg, downArrowSvg, regexSvg, replaceAllSvg, replaceSvg, upArrowSvg, } from './themeIcons';
export const createCypherTheme = ({ dark, editorSettings: settings, highlightStyles, inheritBgColor, diffColors, }) => {
    const themeOptions = {
        '&': {
            backgroundColor: inheritBgColor ? 'inherit' : settings.background,
            color: settings.foreground,
            fontVariantLigatures: 'none',
        },
        '& .cm-snippetField': {
            backgroundColor: settings.autoCompletionPanel.selectedColor,
        },
        '&.cm-focused': {
            outline: 'none',
        },
        '.cm-gutters': {
            backgroundColor: inheritBgColor ? 'inherit' : settings.background,
            color: settings.gutterForeground,
            border: 'none',
        },
        '&.cm-editor': {
            fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
            height: '100%',
        },
        '.cm-content': {
            caretColor: settings.cursor,
        },
        '.cm-cursor, .cm-dropCursor': {
            borderLeftColor: settings.cursor,
        },
        '.cm-activeLine ::not(::selection)': {
            backgroundColor: settings.background,
        },
        '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection ': {
            backgroundColor: settings.selection,
        },
        '& .cm-selectionMatch': {
            backgroundColor: settings.textMatchingSelection,
        },
        '& .cm-bold': {
            fontWeight: 'bold',
        },
        '& .cm-panels': {
            backgroundColor: settings.searchPanel.background,
            fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
            zIndex: 0,
        },
        '& .cm-completionLabel': {
            fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
            verticalAlign: 'middle',
        },
        '& .cm-completionMatchedText': {
            fontWeight: 'bold',
            color: settings.autoCompletionPanel.matchingTextColor,
            textDecoration: 'none',
        },
        '& .cm-signature-help-panel': {
            backgroundColor: settings.autoCompletionPanel.backgroundColor,
            maxWidth: '700px',
            maxHeight: '250px',
            fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
        },
        '& .cm-signature-help-panel-contents': {
            overflow: 'auto',
            maxHeight: '250px',
        },
        '& .cm-signature-help-panel-current-argument': {
            color: settings.autoCompletionPanel.matchingTextColor,
            fontWeight: 'bold',
        },
        '& .cm-signature-help-panel-separator': {
            borderBottom: '1px solid #ccc',
        },
        '& .cm-signature-help-panel-name': {
            padding: '5px',
        },
        '& .cm-signature-help-panel-arg-description': {
            padding: '5px',
        },
        '& .cm-signature-help-panel-description': {
            padding: '5px',
        },
        '.cm-completionInfo-signature': {
            color: 'darkgrey',
        },
        '.cm-deprecated-element': {
            'text-decoration': 'line-through',
        },
        '.cm-tooltip-autocomplete': {
            maxWidth: '430px',
            '& > ul > li[aria-selected]': {
                backgroundColor: settings.autoCompletionPanel.selectedColor,
                color: settings.foreground,
            },
            '& > ul': {
                backgroundColor: settings.autoCompletionPanel.backgroundColor,
                color: settings.foreground,
            },
        },
        '& .cm-search.cm-panel': {
            '& input': {
                fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
            },
            backgroundColor: settings.searchPanel.background,
            color: settings.searchPanel.text,
            '& .cm-button[name=select]': { display: 'none' },
            '& .cm-button': {
                backgroundImage: 'none',
                color: settings.searchPanel.text,
                fontSize: 0,
                border: 'none',
                verticalAlign: 'middle',
                '&[name=next]::before': {
                    content: `url("data:image/svg+xml;base64,${window.btoa(downArrowSvg)}")`,
                },
                '&[name=prev]::before': {
                    content: `url("data:image/svg+xml;base64,${window.btoa(upArrowSvg)}")`,
                },
                '&[name=replace]::before': {
                    content: `url("data:image/svg+xml;base64,${window.btoa(replaceSvg)}")`,
                },
                '&[name=replaceAll]::before': {
                    content: `url("data:image/svg+xml;base64,${window.btoa(replaceAllSvg)}")`,
                },
                width: '20px',
                height: '20px',
                marginRight: '1px',
                marginLeft: '1px',
                borderRadius: '4px',
                padding: '2px',
                '&:hover': {
                    backgroundColor: settings.searchPanel.buttonHoverBackground,
                },
            },
            '& label': {
                fontSize: '0',
                height: '20px',
                width: '20px',
                verticalAlign: 'middle',
                "& input[type='checkbox']": {
                    cursor: 'pointer',
                    appearance: 'none',
                    marginRight: '1px',
                    marginLeft: '1px',
                    padding: '2px',
                    height: '20px',
                    width: '20px',
                    verticalAlign: 'middle',
                    display: 'inline-flex',
                    borderRadius: '4px',
                    '&[name=case]::before': {
                        content: `url("data:image/svg+xml;base64,${window.btoa(caseSensitiveSvg)}")`,
                    },
                    '&[name=re]::before': {
                        content: `url("data:image/svg+xml;base64,${window.btoa(regexSvg)}")`,
                    },
                    '&[name=word]::before': {
                        content: `url("data:image/svg+xml;base64,${window.btoa(byWordSvg)}")`,
                    },
                    '&:hover': {
                        backgroundColor: settings.searchPanel.buttonHoverBackground,
                    },
                    '&:checked': {
                        backgroundColor: settings.searchPanel.buttonHoverBackground,
                    },
                },
            },
        },
        ...(diffColors && {
            '&.cm-merge-b .cm-changedLine': {
                backgroundColor: diffColors.insertedLine,
            },
            '&.cm-merge-b .cm-changedText': {
                background: diffColors.insertedText,
            },
            '&.cm-merge-b .cm-deletedChunk': {
                backgroundColor: diffColors.deletedLine,
            },
            '&.cm-merge-b .cm-deletedChunk .cm-deletedText': {
                background: diffColors.deletedText,
            },
            // Hide the empty deletion widget that unifiedMergeView renders
            // when the original document is empty (its only line is an empty <del>).
            '&.cm-merge-b .cm-deletedChunk:has(> .cm-deletedLine:only-child > del > br:only-child)': {
                display: 'none',
            },
        }),
    };
    const themeExtension = EditorView.theme(themeOptions, { dark });
    const styles = Object.entries(highlightStyles).map(([token, color]) => ({
        tag: tokenTypeToStyleTag[token],
        color,
        class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,
    }));
    const highlightStyle = HighlightStyle.define(styles);
    const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
    return extension;
};
//# sourceMappingURL=createCypherTheme.js.map