import React from 'react';
import { DescriptionTooltip } from '../DescriptionTooltip';
import { MdxJSToJSX } from '../MDXElements';
import { registerWidget, Value } from '../Value';
import { RenderContext, IndentLevelContext, indent, renderTypeParameters } from '../widgetUtils';
registerWidget('function', function (_a) {
    var value = _a.value;
    var level = React.useContext(IndentLevelContext);
    return (React.createElement(RenderContext.Provider, { value: "inline" },
        value.name && React.createElement(Value, { value: value.name }),
        renderTypeParameters(value.typeParameters),
        React.createElement("span", { className: "token punctuation" }, "("),
        React.createElement(React.Fragment, null, value.parameters.map(function (p, index) { return (React.createElement(React.Fragment, { key: index },
            index !== 0 && React.createElement("span", { className: "token punctuation" }, ", "),
            value.parameters.length > 1 && (React.createElement(React.Fragment, null,
                React.createElement("br", null),
                indent(level + 1))),
            value.parameters.length > 1 ? (React.createElement(IndentLevelContext.Provider, { value: level + 1 },
                React.createElement(Value, { value: p }))) : (React.createElement(Value, { value: p })),
            index === value.parameters.length - 1 && index > 0 && (React.createElement(React.Fragment, null,
                React.createElement("br", null),
                indent(level))))); })),
        React.createElement("span", { className: "token operator" }, ")\u00A0=>\u00A0"),
        React.createElement(Value, { value: value.returnType })));
});
registerWidget('parameter', function (_a) {
    var value = _a.value;
    return (React.createElement(RenderContext.Provider, { value: "inline" },
        value.description ? (React.createElement(DescriptionTooltip, { style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, value.description) },
            React.createElement("span", { className: "token property", style: {
                    cursor: 'pointer',
                    textDecoration: 'underline',
                    textDecorationStyle: 'dotted',
                } }, value.name))) : (React.createElement("span", { className: "token property" }, value.name)),
        React.createElement("span", { className: "token punctuation" }, ":"),
        "\u00A0",
        React.createElement(Value, { value: value.type })));
});
