import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Table } from '@workday/canvas-kit-react/table';
import { Text } from '@workday/canvas-kit-react/text';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStyles } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { DescriptionTooltip } from './DescriptionTooltip';
import { MdxJSToJSX } from './MDXElements';
import { IndentLevelContext, RenderContext, capitalize, indent } from './widgetUtils';
const widgets = {};
export function registerWidget(key, widget) {
    widget.displayName = `${capitalize(key)}Widget`;
    widgets[key] = widget;
}
export const Value = (props) => {
    const level = React.useContext(IndentLevelContext);
    if (widgets[props.value.kind]) {
        return React.createElement(widgets[props.value.kind], props);
    }
    return (_jsxs("span", { className: "token unknown", style: { whiteSpace: 'pre-wrap' }, children: ["unknown ", JSON.stringify(props.value, null, '  ').replace(/\n/g, '\n' + indent(level))] }));
};
export const PropertiesInline = ({ properties }) => {
    if (properties.length === 0) {
        return _jsx("span", { className: "token punctuation", children: "{}" });
    }
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const level = React.useContext(IndentLevelContext);
    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "token punctuation", children: "{" }), properties.map((p, index) => {
                return (_jsxs(React.Fragment, { children: [_jsx("br", {}), indent(level + 1), p.description || p.tags.deprecated ? (_jsx(DescriptionTooltip, { type: "describe", cs: { maxWidth: '50em' }, title: _jsx(MdxJSToJSX, { children: p.description || p.tags.deprecated }), children: _jsx(Text, { className: "token property", cs: {
                                    cursor: 'pointer',
                                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                                    textDecorationStyle: 'dotted',
                                    color: p.tags.deprecated
                                        ? system.color.fg.danger.default
                                        : system.color.fg.info.default,
                                }, children: p.name }) })) : (_jsx("span", { className: "token property", children: p.name })), _jsx("span", { className: "token punctuation", children: ":" }), "\u00A0", _jsx(IndentLevelContext.Provider, { value: level + 1, children: _jsx(Value, { value: p.type }) }), _jsx("span", { className: "token punctuation", children: ";" })] }, index));
            }), _jsx("br", {}), indent(level), _jsx("span", { className: "token punctuation", children: "}" })] }));
};
function getTableRows(properties, showDefault = true, showRequired = false, level, index) {
    return properties.flatMap((property, i) => {
        var _a, _b;
        if (!property) {
            return [];
        }
        const title = (_b = (_a = property.declarations) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filePath;
        const propName = (_jsxs(Text, { as: "code", cs: { whiteSpace: 'nowrap !important' }, children: [indent(level), level > 0 && '\u2514\u00A0', property.name, showRequired && property.required ? (_jsx(Text, { cs: { color: system.color.fg.danger.default }, children: "*" })) : ('')] }));
        return [
            _jsxs(Table.Row, { children: [_jsx(Table.Cell, { cs: { color: base.blue800 }, children: title ? (_jsx(Tooltip, { type: "describe", title: title, children: propName })) : (propName) }), _jsx(Table.Cell, { children: _jsx(Flex, { as: "code", cs: { flexWrap: 'wrap' }, children: _jsx(RenderContext.Provider, { value: "inline", children: _jsx(Value, { value: property.type }) }) }) }), _jsx(Table.Cell, { children: _jsx(MdxJSToJSX, { children: property.description || '' }) }), showDefault ? (_jsx(Table.Cell, { children: property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
                            property.defaultValue.value === 'undefined' ? null : (_jsx("code", { children: _jsx(Value, { value: property.defaultValue }) }))) : null })) : null] }, index + i),
        ];
    });
}
const tableStyles = createStyles({
    tableLayout: 'fixed',
});
export const PropertiesTable = ({ properties, showDefault = true, showRequired = false, }) => {
    if (properties.length === 0) {
        return _jsx("span", { className: "token punctuation", children: "{}" });
    }
    const tableBody = getTableRows(properties, showDefault, showRequired, 0, 0);
    return (_jsx(IndentLevelContext.Provider, { value: 0, children: _jsxs(Table, { cs: tableStyles, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Type" }), _jsx(Table.Header, { children: "Description" }), showDefault ? _jsx(Table.Header, { children: "Default" }) : null] }) }), _jsx(Table.Body, { children: tableBody })] }) }));
};
