import * as React from 'react';
import { Link } from 'react-router-dom';
import { map } from 'rxjs/operators';
import { gql, queryGraphQL } from '../backend/graphql';
import { FilteredConnection } from '../components/FilteredConnection';
import { displayRepoPath } from '../components/RepoFileLink';
import { eventLogger } from '../tracking/eventLogger';
import { createAggregateError } from '../util/errors';
import { CircleChevronLeftIcon } from '../util/icons';
function fetchRepositories(args) {
    return queryGraphQL(gql `
            query Repositories($first: Int, $query: String) {
                repositories(first: $first, query: $query) {
                    nodes {
                        id
                        name
                    }
                    totalCount
                    pageInfo {
                        hasNextPage
                    }
                }
            }
        `, args).pipe(map(({ data, errors }) => {
        if (!data || !data.repositories) {
            throw createAggregateError(errors);
        }
        return data.repositories;
    }));
}
const RepositoryNode = ({ node, currentRepo }) => (React.createElement("li", { key: node.id, className: "connection-popover__node" },
    React.createElement(Link, { to: `/${node.name}`, className: `connection-popover__node-link ${node.id === currentRepo ? 'connection-popover__node-link--active' : ''}` },
        displayRepoPath(node.name),
        node.id === currentRepo && (React.createElement(CircleChevronLeftIcon, { className: "icon-inline connection-popover__node-link-icon" })))));
class FilteredRepositoryConnection extends FilteredConnection {
}
/**
 * A popover that displays a searchable list of repositories.
 */
export class RepositoriesPopover extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.queryRepositories = (args) => fetchRepositories(Object.assign({}, args));
    }
    componentDidMount() {
        eventLogger.logViewEvent('RepositoriesPopover');
    }
    render() {
        const nodeProps = { currentRepo: this.props.currentRepo };
        return (React.createElement("div", { className: "repositories-popover connection-popover" },
            React.createElement(FilteredRepositoryConnection, { className: "connection-popover__content", showMoreClassName: "connection-popover__show-more", compact: true, noun: "repository", pluralNoun: "repositories", queryConnection: this.queryRepositories, nodeComponent: RepositoryNode, nodeComponentProps: nodeProps, defaultFirst: 10, autoFocus: true, history: this.props.history, location: this.props.location, noSummaryIfAllNodesVisible: true, shouldUpdateURLQuery: false })));
    }
}
//# sourceMappingURL=RepositoriesPopover.js.map