import { jsx as _jsx } from "react/jsx-runtime";
import clsx from "clsx";
import { memo } from "react";
import ReactMarkdown from "react-markdown";
import { oneLight, vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { CodeBlock } from "../CodeBlock";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../Table";
import { useTheme } from "../ThemeProvider";
function toTableAlignment(align) {
    if (align === "left" || align === "center" || align === "right")
        return align;
    return undefined;
}
const MarkdownTableHead = ({ align, ...props }) => (_jsx(TableHead, { ...props, align: toTableAlignment(align) }));
const MarkdownTableCell = ({ align, ...props }) => (_jsx(TableCell, { ...props, align: toTableAlignment(align) }));
const variantStyles = {
    clear: "",
    card: "openui-markdown-renderer-card",
    sunk: "openui-markdown-renderer-card-sunk",
};
export const MarkDownRenderer = memo((props) => {
    const { mode } = useTheme();
    const theme = mode === "dark" ? vscDarkPlus : oneLight;
    const components = {
        code({ className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || "");
            if (match || (!className && String(children).includes("\n"))) {
                const language = match?.[1] ?? "text";
                const codeString = String(children).trim();
                return _jsx(CodeBlock, { language: language, codeString: codeString, theme: theme });
            }
            return (_jsx("code", { className: clsx("openui-markdown-renderer-code", className), ...props, children: children }));
        },
        a({ href, children, ...props }) {
            return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "openui-markdown-renderer-link", ...props, children: children }));
        },
        table: Table,
        thead: TableHeader,
        th: MarkdownTableHead,
        tbody: TableBody,
        tr: TableRow,
        td: MarkdownTableCell,
    };
    const markdownProps = {
        ...props.options,
        components: { ...components, ...props.options?.components },
    };
    return (_jsx("div", { className: clsx(props["variant"] && variantStyles[props["variant"]], "openui-markdown-renderer", props.className), children: _jsx(ReactMarkdown, { ...markdownProps, children: props.textMarkdown }) }));
});
//# sourceMappingURL=MarkDownRenderer.js.map