function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _object_spread(target) {
    for(var i = 1; i < arguments.length; i++){
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function(key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
    if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);
        if (enumerableOnly) {
            symbols = symbols.filter(function(sym) {
                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            });
        }
        keys.push.apply(keys, symbols);
    }
    return keys;
}
function _object_spread_props(target, source) {
    source = source != null ? source : {};
    if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
        ownKeys(Object(source)).forEach(function(key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
    }
    return target;
}
import { Popover } from "antd";
import React, { useContext, useEffect, useMemo } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { MarkdownEditor, parserMdToSchema } from "../..";
import { useLocale } from "../../I18n";
import { MarkdownRenderer } from "../../MarkdownRenderer";
import { BubbleConfigContext } from "../BubbleConfigProvide";
import { MessagesContext } from "./BubbleContext";
var CONTAINER_STYLE = {
    display: 'flex',
    flexDirection: 'column',
    minWidth: 0,
    maxWidth: '100%'
};
var POPOVER_SHARED_STYLE = {
    padding: 0,
    borderRadius: 'var(--radius-control-sm)',
    background: 'var(--color-primary-bg-page)',
    boxShadow: 'var(--shadow-control-base)'
};
export var MarkdownPreview = function MarkdownPreview(props) {
    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
    var _props_originData, _props_originData1, _props_originData2, _props_originData3;
    var content = props.content, extra = props.extra, typing = props.typing, htmlRef = props.htmlRef, fncProps = props.fncProps, docListNode = props.docListNode, beforeContent = props.beforeContent, afterContent = props.afterContent;
    var editorRef = React.useRef(undefined);
    var hidePadding = (useContext(MessagesContext) || {}).hidePadding;
    var config = useContext(BubbleConfigContext);
    var locale = useLocale();
    var standalone = config === null || config === void 0 ? void 0 : config.standalone;
    var extraShowOnHover = config === null || config === void 0 ? void 0 : config.extraShowOnHover;
    var rc = props.markdownRenderConfig;
    var renderMode = (_ref = (_ref1 = rc === null || rc === void 0 ? void 0 : rc.renderMode) !== null && _ref1 !== void 0 ? _ref1 : rc === null || rc === void 0 ? void 0 : rc.renderType) !== null && _ref !== void 0 ? _ref : 'slate';
    var isStreaming = ((_ref2 = (_ref3 = rc === null || rc === void 0 ? void 0 : rc.streaming) !== null && _ref3 !== void 0 ? _ref3 : rc === null || rc === void 0 ? void 0 : rc.typewriter) !== null && _ref2 !== void 0 ? _ref2 : Boolean(typing)) && ((_ref4 = (_props_originData = props.originData) === null || _props_originData === void 0 ? void 0 : _props_originData.isLast) !== null && _ref4 !== void 0 ? _ref4 : true);
    var isFinished = (_ref5 = (_props_originData1 = props.originData) === null || _props_originData1 === void 0 ? void 0 : _props_originData1.isFinished) !== null && _ref5 !== void 0 ? _ref5 : props.isFinished;
    var noPadding = !!extra;
    useEffect(function() {
        var _editorRef_current;
        if (renderMode !== 'slate') return;
        (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.store.updateNodeList(parserMdToSchema(content).schema);
    }, [
        content,
        renderMode
    ]);
    var markdown = useMemo(function() {
        var _content_includes, _htmlRef_current, _htmlRef_current1, _props_originData, _props_originData1, _props_originData2;
        if (renderMode === 'markdown') {
            return /*#__PURE__*/ React.createElement(MarkdownRenderer, {
                content: content,
                streaming: isStreaming,
                isFinished: isFinished,
                plugins: rc === null || rc === void 0 ? void 0 : rc.plugins,
                remarkPlugins: rc === null || rc === void 0 ? void 0 : rc.markdownToHtmlOptions,
                queueOptions: rc === null || rc === void 0 ? void 0 : rc.queueOptions,
                streamingParagraphAnimation: rc === null || rc === void 0 ? void 0 : rc.streamingParagraphAnimation,
                fncProps: fncProps,
                linkConfig: rc === null || rc === void 0 ? void 0 : rc.linkConfig,
                codeProps: rc === null || rc === void 0 ? void 0 : rc.codeProps,
                apaasify: rc === null || rc === void 0 ? void 0 : rc.apaasify,
                fileMapConfig: rc === null || rc === void 0 ? void 0 : rc.fileMapConfig,
                eleRender: rc === null || rc === void 0 ? void 0 : rc.eleRender,
                style: _object_spread({
                    maxWidth: standalone ? '100%' : undefined,
                    padding: noPadding ? 0 : undefined,
                    margin: noPadding ? 0 : undefined
                }, (rc === null || rc === void 0 ? void 0 : rc.style) || {})
            });
        }
        var minWidth = (content === null || content === void 0 ? void 0 : (_content_includes = content.includes) === null || _content_includes === void 0 ? void 0 : _content_includes.call(content, 'chartType')) ? standalone ? Math.max(((htmlRef === null || htmlRef === void 0 ? void 0 : (_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : _htmlRef_current.clientWidth) || 600) - 23, 500) : Math.min(((htmlRef === null || htmlRef === void 0 ? void 0 : (_htmlRef_current1 = htmlRef.current) === null || _htmlRef_current1 === void 0 ? void 0 : _htmlRef_current1.clientWidth) || 600) - 128, 500) : undefined;
        return /*#__PURE__*/ React.createElement(MarkdownEditor, _object_spread_props(_object_spread({}, rc || {}), {
            fncProps: fncProps,
            editorRef: editorRef,
            initValue: content,
            toc: false,
            width: "100%",
            height: "auto",
            contentStyle: props.style,
            tableConfig: _object_spread({
                actions: {
                    fullScreen: 'modal'
                }
            }, (rc === null || rc === void 0 ? void 0 : rc.tableConfig) || {}),
            deps: [
                String((_props_originData = props.originData) === null || _props_originData === void 0 ? void 0 : _props_originData.isLast),
                String((_props_originData1 = props.originData) === null || _props_originData1 === void 0 ? void 0 : _props_originData1.isFinished),
                String((_props_originData2 = props.originData) === null || _props_originData2 === void 0 ? void 0 : _props_originData2.isAborted)
            ],
            rootContainer: htmlRef,
            editorStyle: _object_spread({
                fontSize: 14
            }, (rc === null || rc === void 0 ? void 0 : rc.editorStyle) || {}),
            streaming: isStreaming,
            style: _object_spread({
                minWidth: minWidth ? "min(".concat(minWidth, "px,100%)") : undefined,
                maxWidth: standalone ? '100%' : undefined,
                padding: noPadding ? 0 : undefined,
                margin: noPadding ? 0 : undefined
            }, (rc === null || rc === void 0 ? void 0 : rc.style) || {}),
            readonly: true
        }));
    }, [
        hidePadding,
        typing,
        (_props_originData2 = props.originData) === null || _props_originData2 === void 0 ? void 0 : _props_originData2.isLast,
        (_props_originData3 = props.originData) === null || _props_originData3 === void 0 ? void 0 : _props_originData3.isFinished,
        noPadding,
        content,
        renderMode,
        rc,
        fncProps,
        standalone
    ]);
    var errorDom = /*#__PURE__*/ React.createElement("div", {
        style: {
            padding: 'var(--padding-5x)',
            background: 'var(--ant-color-bg-container, #fff)',
            color: 'var(--ant-color-error, #ff4d4f)',
            borderRadius: '16px 16px 2px 16px',
            border: '1px solid var(--ant-color-error-border, #ffccc7)',
            marginLeft: props.placement === 'right' ? 0 : 24,
            marginRight: props.placement === 'right' ? 24 : 0
        }
    }, (locale === null || locale === void 0 ? void 0 : locale['error.unexpected']) || '出现点意外情况，请重新发送');
    var body = /*#__PURE__*/ React.createElement("div", {
        style: CONTAINER_STYLE
    }, /*#__PURE__*/ React.createElement(ErrorBoundary, {
        fallback: errorDom
    }, beforeContent, markdown, docListNode, afterContent), !extraShowOnHover && extra);
    if (!extraShowOnHover || !extra || typing) return body;
    var isLeft = props.placement === 'left';
    return /*#__PURE__*/ React.createElement(Popover, {
        trigger: "hover",
        align: {
            points: isLeft ? [
                'tl',
                'bl'
            ] : [
                'tr',
                'br'
            ],
            offset: [
                0,
                -12
            ]
        },
        content: extra,
        styles: {
            root: POPOVER_SHARED_STYLE,
            body: _object_spread_props(_object_spread({}, POPOVER_SHARED_STYLE), {
                padding: 'var(--padding-0-5x)'
            })
        },
        arrow: false,
        placement: isLeft ? 'bottomLeft' : 'bottomRight'
    }, body);
};
