import * as React from 'react';
import { PageTitle } from '../../components/PageTitle';
import { eventLogger } from '../../tracking/eventLogger';
import { asError, isErrorLike } from '../../util/errors';
import { ExtensionNoManifestAlert } from './RegistryExtensionManifestPage';
const ContributionsTable = ({ contributionGroups }) => (React.createElement("div", null,
    contributionGroups.length === 0 && (React.createElement("p", null, "This extension doesn't define any settings or actions. No configuration is required to use it.")),
    contributionGroups.map((group, i) => (group.error || group.rows.length > 0) && (React.createElement(React.Fragment, { key: i },
        React.createElement("h3", null,
            group.title,
            " (",
            group.rows.length,
            ")"),
        group.error && React.createElement("div", { className: "alert alert-danger mt-1" },
            "Error: ",
            group.error.message),
        React.createElement("table", { className: "table" },
            React.createElement("thead", null,
                React.createElement("tr", null, group.columnHeaders.map((label, i) => React.createElement("th", { key: i }, label)))),
            React.createElement("tbody", null, group.rows.map((cells, i) => (React.createElement("tr", { key: i }, cells.map((content, i) => React.createElement("td", { key: i }, content))))))))))));
function toContributionsGroups(manifest) {
    if (!manifest.contributes) {
        return [];
    }
    const groups = [];
    const settingsGroup = { title: 'Settings', columnHeaders: ['Name', 'Description'], rows: [] };
    try {
        if (manifest.contributes.configuration && manifest.contributes.configuration.properties) {
            for (const [name, schema] of Object.entries(manifest.contributes.configuration.properties)) {
                settingsGroup.rows.push([
                    React.createElement("code", null, name),
                    typeof schema.description === 'string' ? schema.description : null,
                ]);
            }
        }
    }
    catch (err) {
        settingsGroup.error = asError(err);
    }
    if (settingsGroup.error || settingsGroup.rows.length > 0) {
        groups.push(settingsGroup);
    }
    const actionsGroup = {
        title: 'Actions',
        columnHeaders: ['Name', 'Description', 'Menu locations'],
        rows: [],
    };
    try {
        if (Array.isArray(manifest.contributes.actions)) {
            for (const action of manifest.contributes.actions) {
                const menus = [];
                if (manifest.contributes.menus) {
                    for (const menu of Object.keys(manifest.contributes.menus)) {
                        const items = manifest.contributes.menus[menu];
                        if (items) {
                            for (const item of items) {
                                if (item.action === action.id && !menus.includes(menu)) {
                                    menus.push(menu);
                                }
                            }
                        }
                    }
                }
                const description = `${action.title || ''}${action.title && action.description ? ': ' : ''}${action.description || ''}`;
                actionsGroup.rows.push([
                    React.createElement("code", null, action.command),
                    // tslint:disable-next-line:no-invalid-template-strings
                    description.includes('${') ? (React.createElement(React.Fragment, null,
                        "Evaluated at runtime: ",
                        React.createElement("span", { className: "text-monospace" }, description))) : (description),
                    menus.map((menu, i) => (React.createElement("code", { key: i, className: "mr-1 border p-1" }, menu))),
                ]);
            }
        }
    }
    catch (err) {
        actionsGroup.error = asError(err);
    }
    if (actionsGroup.error || actionsGroup.rows.length > 0) {
        groups.push(actionsGroup);
    }
    return groups;
}
/** A page that displays an extension's manifest. */
export class RegistryExtensionContributionsPage extends React.PureComponent {
    componentDidMount() {
        eventLogger.logViewEvent('RegistryExtensionContributions');
    }
    render() {
        return (React.createElement("div", { className: "registry-extension-manifest-page" },
            React.createElement(PageTitle, { title: `Contributions of ${this.props.extension.id}` }),
            React.createElement("div", { className: "mt-2" }, this.props.extension.manifest === null ? (React.createElement(ExtensionNoManifestAlert, { extension: this.props.extension })) : isErrorLike(this.props.extension.manifest) ? (React.createElement("div", { className: "alert alert-error" },
                "Error parsing extension manifest: ",
                this.props.extension.manifest.message)) : (React.createElement(ContributionsTable, { contributionGroups: toContributionsGroups(this.props.extension.manifest) })))));
    }
}
//# sourceMappingURL=RegistryExtensionContributionsPage.js.map