import React from 'react';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { Text } from '@workday/canvas-kit-react/text';
import { MdxJSToJSX } from './MDXElements';
import { Table } from './Table';
import { capitalize, IndentLevelContext, RenderContext, indent } from './widgetUtils';
import { DescriptionTooltip } from './DescriptionTooltip';
var widgets = {};
export function registerWidget(key, widget) {
    widget.displayName = capitalize(key) + "Widget";
    widgets[key] = widget;
}
export var Value = function (props) {
    var level = React.useContext(IndentLevelContext);
    if (widgets[props.value.kind]) {
        return React.createElement(widgets[props.value.kind], props);
    }
    return (React.createElement("span", { className: "token unknown", style: { whiteSpace: 'pre-wrap' } },
        "unknown ",
        JSON.stringify(props.value, null, '  ').replace(/\n/g, '\n' + indent(level))));
};
export var PropertiesInline = function (_a) {
    var properties = _a.properties;
    if (properties.length === 0) {
        return React.createElement("span", { className: "token punctuation" }, "{}");
    }
    var level = React.useContext(IndentLevelContext);
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { className: "token punctuation" }, "{"),
        properties.map(function (p, index) {
            return (React.createElement(React.Fragment, { key: index },
                React.createElement("br", null),
                indent(level + 1),
                p.description ? (React.createElement(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, p.description) },
                    React.createElement("span", { className: "token property", style: {
                            cursor: 'pointer',
                            textDecoration: 'underline',
                            textDecorationStyle: 'dotted',
                        } }, p.name))) : (React.createElement("span", { className: "token property" }, p.name)),
                React.createElement("span", { className: "token punctuation" }, ":"),
                "\u00A0",
                React.createElement(IndentLevelContext.Provider, { value: level + 1 },
                    React.createElement(Value, { value: p.type })),
                React.createElement("span", { className: "token punctuation" }, ";")));
        }),
        React.createElement("br", null),
        indent(level),
        React.createElement("span", { className: "token punctuation" }, "}")));
};
function getTableRows(properties, showDefault, showRequired, level, index) {
    if (showDefault === void 0) { showDefault = true; }
    if (showRequired === void 0) { showRequired = false; }
    return properties.flatMap(function (property, i) {
        var _a, _b;
        if (!property) {
            return [];
        }
        var title = (_b = (_a = property.declarations) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filePath;
        var propName = (React.createElement(Text, { as: "code", whiteSpace: 'nowrap !important' },
            indent(level),
            level > 0 && '\u2514\u00A0',
            property.name,
            showRequired && property.required ? React.createElement(Text, { color: "chiliMango600" }, "*") : ''));
        return [
            React.createElement(Table.Row, { key: index + i },
                React.createElement(Table.Data, { color: "plum600" }, title ? (React.createElement(Tooltip, { type: "describe", title: title }, propName)) : (propName)),
                React.createElement(Table.Data, null,
                    React.createElement("code", null, React.createElement(RenderContext.Provider, { value: "inline" },
                        React.createElement(Value, { value: property.type })))),
                React.createElement(Table.Data, null,
                    React.createElement(MdxJSToJSX, null, property.description || '')),
                showDefault ? (React.createElement(Table.Data, null, property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
                    property.defaultValue.value === 'undefined' ? null : (React.createElement("code", null,
                    React.createElement(Value, { value: property.defaultValue })))) : null)) : null),
        ];
    });
}
export var PropertiesTable = function (_a) {
    var properties = _a.properties, _b = _a.showDefault, showDefault = _b === void 0 ? true : _b, _c = _a.showRequired, showRequired = _c === void 0 ? false : _c;
    if (properties.length === 0) {
        return React.createElement("span", { className: "token punctuation" }, "{}");
    }
    var tableBody = getTableRows(properties, showDefault, showRequired, 0, 0);
    return (React.createElement(IndentLevelContext.Provider, { value: 0 },
        React.createElement(Table, null,
            React.createElement(Table.Head, null,
                React.createElement(Table.Row, null,
                    React.createElement(Table.Header, null, "Name"),
                    React.createElement(Table.Header, null, "Type"),
                    React.createElement(Table.Header, null, "Description"),
                    showDefault ? React.createElement(Table.Header, null, "Default") : null)),
            React.createElement(Table.Body, null, tableBody))));
};
