"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.withCodeBlockActions = withCodeBlockActions;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const uikit_1 = require("@gravity-ui/uikit");
const TextWrappingButton_1 = require("./TextWrappingButton.js");
require("./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';
function withCodeBlockActions({ copyButton = true, lineWrappingButton = false, codeBlockSelector = CODEBLOCK_DEFAULT_SELECTOR, getCodeBlockText = getCodeBlockTextDefault, }) {
    return (Component) => (0, react_1.forwardRef)(function WithCodeBlockActions(props, ref) {
        const { html } = props;
        const [codeBlockElements, setCodeBlockElements] = (0, react_1.useState)([]);
        const domRef = (0, react_1.useRef)(null);
        const componentRef = (0, uikit_1.useForkRef)(ref, domRef);
        (0, react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(uikit_1.Portal, { container: container, children: [lineWrappingButton && ((0, jsx_runtime_1.jsx)(TextWrappingButton_1.CodeTextWrappingToggleButton, { codeElement: element, className: VIEWER_CODEBLOCK_BUTTON_CN })), copyButton && ((0, jsx_runtime_1.jsx)(uikit_1.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
