"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "PseudoHtmlDiff", {
    enumerable: true,
    get: function() {
        return PseudoHtmlDiff;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _CollapseIcon = require("../../icons/CollapseIcon");
function PseudoHtmlDiff(param) {
    let { componentStackFrames, serverContent, clientContent, hydrationMismatchType, ...props } = param;
    const isHtmlTagsWarning = hydrationMismatchType === "tag";
    // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack
    const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4;
    const shouldCollapse = componentStackFrames.length > MAX_NON_COLLAPSED_FRAMES;
    const [isHtmlCollapsed, toggleCollapseHtml] = (0, _react.useState)(shouldCollapse);
    const htmlComponents = (0, _react.useMemo)(()=>{
        const tagNames = isHtmlTagsWarning ? [
            serverContent,
            clientContent
        ] : [];
        const nestedHtmlStack = [];
        let lastText = "";
        componentStackFrames.map((frame)=>frame.component).reverse().forEach((component, index, componentList)=>{
            const spaces = " ".repeat(nestedHtmlStack.length * 2);
            const prevComponent = componentList[index - 1];
            const nextComponent = componentList[index + 1];
            // When component is the server or client tag name, highlight it
            const isHighlightedTag = tagNames.includes(component);
            const isRelatedTag = isHighlightedTag || tagNames.includes(prevComponent) || tagNames.includes(nextComponent);
            const isLastFewFrames = !isHtmlTagsWarning && index >= componentList.length - 6;
            if (isHtmlTagsWarning && isRelatedTag || isLastFewFrames) {
                const codeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
                    children: [
                        spaces,
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                            ...isHighlightedTag ? {
                                "data-nextjs-container-errors-pseudo-html--tag-error": true
                            } : undefined,
                            children: "<" + component + ">\n"
                        })
                    ]
                });
                lastText = component;
                const wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
                    children: [
                        codeLine,
                        isHighlightedTag && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                            children: spaces + "^".repeat(component.length + 2) + "\n"
                        })
                    ]
                }, nestedHtmlStack.length);
                nestedHtmlStack.push(wrappedCodeLine);
            } else {
                if (nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES && isHtmlCollapsed) {
                    return;
                }
                if (!isHtmlCollapsed || isLastFewFrames) {
                    nestedHtmlStack.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
                        children: [
                            spaces,
                            "<" + component + ">\n"
                        ]
                    }, nestedHtmlStack.length));
                } else if (isHtmlCollapsed && lastText !== "...") {
                    lastText = "...";
                    nestedHtmlStack.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
                        children: [
                            spaces,
                            "...\n"
                        ]
                    }, nestedHtmlStack.length));
                }
            }
        });
        if (hydrationMismatchType === "text") {
            const spaces = " ".repeat(nestedHtmlStack.length * 2);
            const wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                        "data-nextjs-container-errors-pseudo-html--diff-remove": true,
                        children: spaces + ('"' + serverContent + '"\n')
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                        "data-nextjs-container-errors-pseudo-html--diff-add": true,
                        children: spaces + ('"' + clientContent + '"\n')
                    })
                ]
            }, nestedHtmlStack.length);
            nestedHtmlStack.push(wrappedCodeLine);
        }
        return nestedHtmlStack;
    }, [
        componentStackFrames,
        isHtmlCollapsed,
        clientContent,
        serverContent,
        isHtmlTagsWarning,
        hydrationMismatchType,
        MAX_NON_COLLAPSED_FRAMES
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        "data-nextjs-container-errors-pseudo-html": true,
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                tabIndex: 10,
                "data-nextjs-container-errors-pseudo-html-collapse": true,
                onClick: ()=>toggleCollapseHtml(!isHtmlCollapsed),
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollapseIcon.CollapseIcon, {
                    collapsed: isHtmlCollapsed
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
                ...props,
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
                    children: htmlComponents
                })
            })
        ]
    });
}

if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
  Object.defineProperty(exports.default, '__esModule', { value: true });
  Object.assign(exports.default, exports);
  module.exports = exports.default;
}

//# sourceMappingURL=component-stack-pseudo-html.js.map