import extensionSchemaJSON from '@sourcegraph/extensions-client-common/lib/schema/extension.schema.json';
import EyeIcon from 'mdi-react/EyeIcon';
import InformationOutlineIcon from 'mdi-react/InformationOutlineIcon';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { PageTitle } from '../../components/PageTitle';
import { DynamicallyImportedMonacoSettingsEditor } from '../../settings/DynamicallyImportedMonacoSettingsEditor';
import { eventLogger } from '../../tracking/eventLogger';
export const ExtensionNoManifestAlert = ({ extension }) => (React.createElement("div", { className: "alert alert-info" },
    "This extension is not yet published.",
    extension.registryExtension &&
        extension.registryExtension.viewerCanAdminister && (React.createElement(React.Fragment, null,
        React.createElement("br", null),
        React.createElement(Link, { className: "mt-3 btn btn-primary", to: `${extension.registryExtension.url}/-/releases/new` }, "Publish first release of extension")))));
var ViewMode;
(function (ViewMode) {
    ViewMode["Rich"] = "rich";
    ViewMode["Plain"] = "plain";
})(ViewMode || (ViewMode = {}));
/** A page that displays an extension's manifest. */
export class RegistryExtensionManifestPage extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { viewMode: RegistryExtensionManifestPage.getViewMode() };
        this.onViewModeButtonClick = () => {
            this.setState(prevState => ({ viewMode: prevState.viewMode === ViewMode.Rich ? ViewMode.Plain : ViewMode.Rich }), () => RegistryExtensionManifestPage.setViewMode(this.state.viewMode));
        };
    }
    static getViewMode() {
        const v = localStorage.getItem(RegistryExtensionManifestPage.STORAGE_KEY);
        if (v === ViewMode.Rich || v === ViewMode.Plain) {
            return v;
        }
        return ViewMode.Rich;
    }
    static setViewMode(value) {
        localStorage.setItem(RegistryExtensionManifestPage.STORAGE_KEY, value);
    }
    componentDidMount() {
        eventLogger.logViewEvent('RegistryExtensionManifest');
    }
    render() {
        return (React.createElement("div", { className: "registry-extension-manifest-page" },
            React.createElement(PageTitle, { title: `Manifest of ${this.props.extension.id}` }),
            React.createElement("div", { className: "d-flex align-items-center justify-content-between" },
                React.createElement("div", { className: "d-flex align-items-center" },
                    React.createElement("h3", { className: "mb-0 mr-1" }, "Manifest"),
                    React.createElement(InformationOutlineIcon, { className: "icon-inline text-muted", "data-tooltip": "The published JSON description of how to run or access the extension" })),
                React.createElement("div", null,
                    this.props.extension.manifest && (React.createElement("button", { type: "button", className: "btn btn-secondary", onClick: this.onViewModeButtonClick },
                        React.createElement(EyeIcon, { className: "icon-inline" }),
                        " Use",
                        ' ',
                        this.state.viewMode === ViewMode.Plain ? ViewMode.Rich : ViewMode.Plain,
                        " viewer")),
                    ' ',
                    this.props.extension.registryExtension &&
                        this.props.extension.registryExtension.viewerCanAdminister && (React.createElement(Link, { className: "btn btn-primary", to: `${this.props.extension.registryExtension.url}/-/releases/new` }, "Publish new release")))),
            React.createElement("div", { className: "mt-2" }, this.props.extension.rawManifest === null ? (React.createElement(ExtensionNoManifestAlert, { extension: this.props.extension })) : this.state.viewMode === ViewMode.Rich ? (React.createElement(DynamicallyImportedMonacoSettingsEditor, { id: "registry-extension-edit-page__data", value: this.props.extension.rawManifest, height: 500, jsonSchema: extensionSchemaJSON, readOnly: true, isLightTheme: this.props.isLightTheme, history: this.props.history })) : (React.createElement("pre", { className: "form-control" },
                React.createElement("code", null, this.props.extension.rawManifest))))));
    }
}
RegistryExtensionManifestPage.STORAGE_KEY = 'RegistryExtensionManifestPage.viewMode';
//# sourceMappingURL=RegistryExtensionManifestPage.js.map