import { ConfigProvider } from "antd";
import classNames from "clsx";
import React, { useContext, useMemo, useRef } from "react";
import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
import { useStyle } from "./style";
import { useMermaidRender } from "./useMermaidRender";
/**
 * Mermaid 渲染器组件实现
 * 负责实际的图表渲染逻辑
 */ export var MermaidRendererImpl = function MermaidRendererImpl(props) {
    var context = useContext(ConfigProvider.ConfigContext);
    var baseCls = (context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-plugin-mermaid')) || 'plugin-mermaid';
    var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
    var containerRef = useRef(null);
    var divRef = useRef(null);
    var id = useMemo(function() {
        return 'm' + (Date.now() + Math.ceil(Math.random() * 1000));
    }, []);
    var isVisible = useIntersectionOnce(containerRef);
    var _useMermaidRender = useMermaidRender(props.element.value || '', divRef, id, isVisible), error = _useMermaidRender.error, renderedCode = _useMermaidRender.renderedCode;
    var isError = useMemo(function() {
        return !!error && !!error.trim();
    }, [
        error
    ]);
    var isRendered = useMemo(function() {
        return renderedCode && !isError;
    }, [
        renderedCode,
        isError
    ]);
    var style = useMemo(function() {
        return {
            visibility: isRendered ? 'visible' : 'hidden',
            pointerEvents: isRendered ? 'auto' : 'none',
            width: '100%',
            height: isRendered ? '100%' : '0',
            overflow: isRendered ? 'auto' : 'hidden',
            maxHeight: isRendered ? '100%' : '0',
            minHeight: isRendered ? '200px' : '0'
        };
    }, [
        isRendered
    ]);
    var renderCode = props.element.value || '';
    var dom = /*#__PURE__*/ React.createElement("div", {
        ref: containerRef,
        className: classNames(baseCls, hashId),
        contentEditable: false
    }, /*#__PURE__*/ React.createElement("div", {
        contentEditable: false,
        ref: divRef,
        className: classNames(hashId),
        style: style,
        "data-mermaid-container": "true"
    }), error && /*#__PURE__*/ React.createElement("div", {
        className: classNames("".concat(baseCls, "-error"), hashId)
    }, /*#__PURE__*/ React.createElement("pre", {
        style: {
            margin: 0,
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word'
        }
    }, renderCode)), !renderedCode && !error && /*#__PURE__*/ React.createElement("div", {
        className: classNames("".concat(baseCls, "-empty"), hashId)
    }, /*#__PURE__*/ React.createElement("pre", {
        style: {
            margin: 0,
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word'
        }
    }, renderCode)));
    return wrapSSR(dom);
};
