import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState, } from 'react';
import { ClipboardButton, Portal, useForkRef } from '@gravity-ui/uikit';
import { CodeTextWrappingToggleButton } from "./TextWrappingButton.js";
import "./styles.css";
const VIEWER_CODEBLOCK_CN = 'g-md-viewer-code-block';
const VIEWER_CODEBLOCK_BUTTON_CN = 'g-md-viewer-code-button';
const VIEWER_CODEBLOCK_FLOATING_CN = 'g-md-viewer-code-block-floating-container';
const CODEBLOCK_DEFAULT_SELECTOR = '.yfm-clipboard, .yfm-code-floating-container';
export function withCodeBlockActions({ copyButton = true, lineWrappingButton = false, codeBlockSelector = CODEBLOCK_DEFAULT_SELECTOR, getCodeBlockText = getCodeBlockTextDefault, }) {
    return (Component) => forwardRef(function WithCodeBlockActions(props, ref) {
        const { html } = props;
        const [codeBlockElements, setCodeBlockElements] = useState([]);
        const domRef = useRef(null);
        const componentRef = useForkRef(ref, domRef);
        useEffect(() => {
            if (!domRef.current) {
                setCodeBlockElements([]);
                return undefined;
            }
            const elements = Array.from(domRef.current.querySelectorAll(codeBlockSelector));
            setCodeBlockElements(elements);
            const destructors = elements.map((element) => {
                element.classList.add(VIEWER_CODEBLOCK_CN);
                const container = element.appendChild(element.ownerDocument.createElement('div'));
                container.classList.add(VIEWER_CODEBLOCK_FLOATING_CN);
                return () => {
                    element.classList.remove(VIEWER_CODEBLOCK_CN);
                    container.parentNode?.removeChild(container);
                };
            });
            return () => {
                destructors.forEach((destructor) => destructor());
            };
        }, [html]);
        return (_jsxs(_Fragment, { children: [_jsx(Component, { ...props, ref: componentRef }), codeBlockElements.map((element, idx) => {
                    const container = element.querySelector(`.${VIEWER_CODEBLOCK_FLOATING_CN}`);
                    if (!container)
                        return null;
                    const id = element.id;
                    const line = element.dataset.line;
                    return (_jsxs(Portal, { container: container, children: [lineWrappingButton && (_jsx(CodeTextWrappingToggleButton, { codeElement: element, className: VIEWER_CODEBLOCK_BUTTON_CN })), copyButton && (_jsx(ClipboardButton, { size: "m", text: () => getCodeBlockText(element), className: VIEWER_CODEBLOCK_BUTTON_CN }))] }, id || line || idx));
                })] }));
    });
}
function getCodeBlockTextDefault(element) {
    const codeElem = element.querySelector('pre code');
    if (!codeElem)
        return '';
    return Array.from(codeElem.childNodes)
        .filter((node) => {
        // Skip line number spans
        if (node instanceof HTMLElement && node.classList.contains('yfm-line-number')) {
            return false;
        }
        return true;
    })
        .map((node) => node.textContent)
        .join('');
}
//# sourceMappingURL=index.js.map
