import { ActionItem } from '@sourcegraph/extensions-client-common/lib/app/actions/ActionItem';
import { ActionsContainer } from '@sourcegraph/extensions-client-common/lib/app/actions/ActionsContainer';
import BookOpenIcon from 'mdi-react/BookOpenIcon';
import CloseIcon from 'mdi-react/CloseIcon';
import LinkIcon from 'mdi-react/LinkIcon';
import SquareEditOutlineIcon from 'mdi-react/SquareEditOutlineIcon';
import StarIcon from 'mdi-react/StarIcon';
import * as React from 'react';
import { fromEvent, merge, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { ContributableMenu } from 'sourcegraph/module/protocol';
import { Key } from 'ts-key-enum';
export class HelpPopover extends React.Component {
    constructor() {
        super(...arguments);
        this.subscriptions = new Subscription();
        this.ref = null;
        this.setRef = (e) => (this.ref = e);
    }
    componentDidMount() {
        const escKeypress = fromEvent(window, 'keydown').pipe(filter(event => event.key === Key.Escape));
        const outsideClick = fromEvent(window, 'mousedown').pipe(filter(event => !!this.ref && !this.ref.contains(event.target)));
        this.subscriptions.add(merge(escKeypress, outsideClick).subscribe(() => this.props.onDismiss()));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: "help-popover card", ref: this.setRef },
            React.createElement("h4", { className: "card-header d-flex justify-content-between pl-3" },
                "Help",
                React.createElement("button", { type: "reset", className: "btn btn-icon help-popover__close", onClick: this.props.onDismiss, title: "Close" },
                    React.createElement(CloseIcon, { className: "icon-inline" }))),
            React.createElement("div", { className: "list-group list-group-flush" },
                React.createElement("a", { className: "list-group-item list-group-item-action px-3 py-2", href: "https://about.sourcegraph.com/docs/search/query-syntax", target: "_blank" },
                    React.createElement(StarIcon, { className: "icon-inline" }),
                    " How to search"),
                React.createElement("a", { className: "list-group-item list-group-item-action px-3 py-2", href: "https://about.sourcegraph.com/docs", target: "_blank" },
                    React.createElement(BookOpenIcon, { className: "icon-inline" }),
                    " Sourcegraph documentation"),
                React.createElement("a", { className: "list-group-item list-group-item-action px-3 py-2", href: "https://github.com/sourcegraph/issues/issues", target: "_blank", rel: "noreferrer" },
                    React.createElement(LinkIcon, { className: "icon-inline" }),
                    " Public issue tracker"),
                React.createElement("a", { className: "list-group-item list-group-item-action px-3 py-2", href: "https://about.sourcegraph.com/contact", target: "_blank" },
                    React.createElement(SquareEditOutlineIcon, { className: "icon-inline" }),
                    " Contact Sourcegraph")),
            React.createElement("h4", { className: "card-header pl-3" }, "File a public issue..."),
            React.createElement("div", { className: "list-group list-group-flush" }, HelpPopover.LINKS.map(({ title, description, template }, i) => (React.createElement("a", { className: "list-group-item list-group-item-action px-3 py-2", href: `https://github.com/sourcegraph/issues/issues/new?template=${template}`, target: "_blank", rel: "noreferrer" },
                React.createElement("strong", null,
                    title,
                    " \u00BB"),
                React.createElement("br", null),
                React.createElement("small", { className: "text-muted" }, description))))),
            React.createElement(ActionsContainer, { menu: ContributableMenu.Help, 
                // tslint:disable-next-line:jsx-no-lambda
                render: items => (React.createElement(React.Fragment, null,
                    React.createElement("h4", { className: "card-header pl-3" }, "Extensions help"),
                    items.map((item, i) => (React.createElement(ActionItem, Object.assign({ key: i }, item, { extensionsController: this.props.extensionsController, extensions: this.props.extensions })))))), empty: null, extensionsController: this.props.extensionsController, extensions: this.props.extensions })));
    }
}
HelpPopover.LINKS = [
    { title: 'Bug report', description: 'Report problems and unexpected behavior', template: 'bug_report.md' },
    { title: 'Feature request', description: 'Suggest an idea for Sourcegraph', template: 'feature_request.md' },
    { title: 'Question', description: 'Ask a question about Sourcegraph', template: 'question.md' },
];
//# sourceMappingURL=HelpPopover.js.map