import { isExtensionAdded, isExtensionEnabled } from '@sourcegraph/extensions-client-common/lib/extensions/extension';
import { ExtensionToggle } from '@sourcegraph/extensions-client-common/lib/extensions/ExtensionToggle';
import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { isErrorLike } from '../../util/errors';
import { ExtensionConfigurationState } from './ExtensionConfigurationState';
/**
 * Header for the extension area.
 */
export const ExtensionAreaHeader = (props) => {
    const manifest = props.extension.manifest && !isErrorLike(props.extension.manifest) ? props.extension.manifest : undefined;
    let iconURL;
    try {
        if (manifest && manifest.icon) {
            iconURL = new URL(manifest.icon);
        }
    }
    catch (e) {
        // noop
    }
    return (React.createElement("div", { className: "extension-area-header border-bottom simple-area-header pt-4" },
        React.createElement("div", { className: "container" }, props.extension && (React.createElement(React.Fragment, null,
            React.createElement("div", { className: "mb-3" },
                React.createElement("div", { className: "d-flex align-items-start" },
                    manifest &&
                        manifest.icon &&
                        iconURL &&
                        iconURL.protocol === 'data:' &&
                        /^data:image\/png(;base64)?,/.test(manifest.icon) && (React.createElement("img", { className: "extension-area-header__icon mr-2", src: manifest.icon })),
                    React.createElement("div", null,
                        React.createElement("div", { className: "d-flex align-items-center" },
                            React.createElement("h2", { className: "mb-0" }, (manifest && manifest.title) || props.extension.id)),
                        manifest &&
                            manifest.title && React.createElement("div", { className: "text-muted" }, props.extension.id),
                        manifest &&
                            manifest.description && React.createElement("p", { className: "mt-1 mb-0" }, manifest.description)))),
            React.createElement("div", { className: "d-flex align-items-center mt-3 mb-2" },
                props.authenticatedUser && (React.createElement(ExtensionToggle, { extension: props.extension, configurationCascade: props.configurationCascade, onUpdate: props.onDidUpdateExtension, className: "mr-2", addClassName: "btn-primary", extensions: props.extensions })),
                React.createElement(ExtensionConfigurationState, { isAdded: isExtensionAdded(props.configurationCascade.merged, props.extension.id), isEnabled: isExtensionEnabled(props.configurationCascade.merged, props.extension.id) }),
                !props.authenticatedUser && (React.createElement("div", { className: "d-flex align-items-center mt-3 mb-2" },
                    React.createElement(Link, { to: "/sign-in", className: "btn btn-primary mr-2" },
                        "Sign in to",
                        ' ',
                        isExtensionEnabled(props.configurationCascade.merged, props.extension.id)
                            ? 'configure'
                            : 'enable'),
                    React.createElement("small", { className: "text-muted" },
                        "An account is required to",
                        ' ',
                        isExtensionEnabled(props.configurationCascade.merged, props.extension.id)
                            ? ''
                            : 'enable and',
                        ' ',
                        "configure extensions.")))),
            React.createElement("div", { className: "area-header__nav mt-3" },
                React.createElement("div", { className: "area-header__nav-links" }, props.navItems.map(({ to, label, exact, icon: Icon, condition = () => true }) => condition(props) && (React.createElement(NavLink, { key: label, to: props.url + to, className: "btn area-header__nav-link", activeClassName: "area-header__nav-link--active", exact: exact },
                    Icon && React.createElement(Icon, { className: "icon-inline" }),
                    " ",
                    label))))))))));
};
//# sourceMappingURL=ExtensionAreaHeader.js.map