import * as React from 'react';
import { Link } from 'react-router-dom';
import { FilteredConnection } from '../components/FilteredConnection';
import { Timestamp } from '../components/time/Timestamp';
import { UserAvatar } from '../user/UserAvatar';
import { ChatIcon } from '../util/icons';
import { openFromJS } from '../util/url';
import { fetchDiscussionThreads } from './backend';
const DiscussionNode = ({ node, location }) => {
    const currentURL = location.pathname + location.search + location.hash;
    // TODO(slimsag:discussions): future: Improve rendering of discussions when there is no inline URL
    const inlineURL = node.inlineURL || '';
    const openDiscussion = (e) => openFromJS(inlineURL, e);
    const preventDefault = (e) => e.preventDefault();
    const stopPropagation = (e) => e.stopPropagation();
    return (React.createElement("li", { className: 'discussions-list__row' + (currentURL === inlineURL ? ' discussions-list__row--active' : ''), onClick: openDiscussion },
        React.createElement("div", { className: "discussions-list__row-top-line" },
            React.createElement("a", { href: "#", onClick: preventDefault, className: "discussions-list__row-title " }, node.title),
            React.createElement("small", { className: "discussions-list__row-id" },
                "#",
                node.id),
            React.createElement("span", { className: "discussions-list__row-spacer" }),
            React.createElement("span", { className: "discussions-list__row-comments-count", "data-tooltip": node.comments.totalCount + ' comments' },
                React.createElement(ChatIcon, { className: "icon-inline" }),
                " ",
                node.comments.totalCount)),
        React.createElement("div", { className: "discussions-list__row-bottom-line" },
            React.createElement("span", null,
                "Created ",
                React.createElement(Timestamp, { date: node.createdAt }),
                " by",
                ' ',
                React.createElement(Link, { to: `/users/${node.author.username}`, onClick: stopPropagation, "data-tooltip": node.author.displayName }, node.author.username),
                ' ',
                React.createElement(Link, { to: `/users/${node.author.username}`, onClick: stopPropagation, "data-tooltip": node.author.displayName },
                    React.createElement(UserAvatar, { user: node.author, className: "icon-inline icon-sm" }))))));
};
class FilteredDiscussionsConnection extends FilteredConnection {
}
export class DiscussionsList extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.fetchThreads = (args) => fetchDiscussionThreads(Object.assign({}, args, { targetRepositoryID: this.props.repoID, targetRepositoryPath: this.props.filePath }));
    }
    render() {
        return (React.createElement(FilteredDiscussionsConnection, { className: 'discussions-list' + this.props.noFlex ? 'discussions-list--no-flex' : '', autoFocus: this.props.autoFocus !== undefined ? this.props.autoFocus : true, compact: true, noun: this.props.noun || 'discussion', pluralNoun: this.props.pluralNoun || 'discussions', queryConnection: this.fetchThreads, nodeComponent: DiscussionNode, nodeComponentProps: { location: this.props.location }, updateOnChange: `${this.props.repoID}:${this.props.rev}:${this.props.filePath}`, defaultFirst: this.props.defaultFirst || 100, hideSearch: this.props.hideSearch, shouldUpdateURLQuery: false, history: this.props.history, location: this.props.location }));
    }
}
//# sourceMappingURL=DiscussionsList.js.map