var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
//@ts-ignore
import { useMDXComponents } from '@mdx-js/react';
import React from 'react';
import MarkdownToJSX from 'markdown-to-jsx';
import { createComponent } from '@workday/canvas-kit-react';
import { HeadingLevelContext, SymbolDialog } from './widgetUtils';
/**
 * Special component that taps into @mdx-js/react components that are used by both Storybook and the
 * Canvas Site. This means our docs can use the same components used in our MDX files without
 * needing to use MDX directly.
 */
export var MDX = createComponent('div')({
    Component: function (_a, _ref, Element) {
        var children = _a.children, elemProps = __rest(_a, ["children"]);
        var components = useMDXComponents();
        return React.createElement(components[Element], elemProps, children);
    },
});
/**
 * Custom component that allows us to convert any `button` in JSDoc that contains a `[data-symbol]`
 * to a `<SymbolDialog>` component.
 */
var Button = function (props) {
    var components = useMDXComponents();
    if (props['data-symbol'] !== undefined) {
        return (React.createElement("code", null,
            React.createElement(SymbolDialog, { value: {
                    kind: 'symbol',
                    name: props.children[0],
                    displayName: props['data-symbol'],
                    value: props.children[0],
                } })));
    }
    return React.createElement(components['button'] || 'button', props, props.children);
};
/**
 * Convert [JSDoc link](https://jsdoc.app/tags-inline-link.html) into a `button` element for later
 * processing. This allows us to convert {@link SymbolName Link Text} to a `<SymbolDialog>`!
 */
function convertLinkToSymbolLinks(input) {
    return input.replace(/{@link ([a-z0-9.]+)( [a-z0-9.]+)?}/gi, function (substr, symbol, text) {
        if (text === void 0) { text = ''; }
        return "<button href=\"#\" data-symbol=\"" + text.trim() + "\" class=\"token symbol\">" + symbol + "</button>";
    });
}
/**
 * Replace all heading levels in the JSDoc to start at the same heading level as `startingLevel`.
 * This allows JSDoc markdown to seamlessly flow into MDX.
 */
function rewriteHeadingLevels(input, startingLevel) {
    var firstHeadingMatch = input.match(/(#+ )[A-Za-z]/);
    if (!firstHeadingMatch) {
        return input;
    }
    var firstHeadingLevel = firstHeadingMatch[1];
    return input.replace(new RegExp(firstHeadingLevel, 'g'), Array.from({ length: startingLevel }, function () { return '#'; }).join('') + ' ');
}
/**
 * Custom MDX to JSX parsing
 */
export var MdxJSToJSX = function (props) {
    var components = useMDXComponents();
    var headingLevel = React.useContext(HeadingLevelContext);
    return (React.createElement(MarkdownToJSX, { options: { overrides: __assign(__assign({}, components), { button: Button }), forceBlock: true } }, rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel)));
};
