import { LoadingSpinner } from '@sourcegraph/react-loading-spinner';
import { truncate } from 'lodash';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, map, startWith, switchMap, withLatestFrom } from 'rxjs/operators';
import { buildSearchURLQuery } from '..';
import { eventLogger } from '../../tracking/eventLogger';
import { fetchSearchResultStats } from '../backend';
import { Sparkline } from './Sparkline';
export class SavedQueryRow extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { loading: true };
        this.componentUpdates = new Subject();
        this.refreshRequested = new Subject();
        this.subscriptions = new Subscription();
        this.logEvent = () => eventLogger.log(this.props.eventName);
    }
    componentDidMount() {
        const propsChanges = this.componentUpdates.pipe(startWith(this.props));
        this.subscriptions.add(this.refreshRequested
            .pipe(debounceTime(250), withLatestFrom(propsChanges), map(([v]) => v), switchMap(query => fetchSearchResultStats({ query })), map(results => ({
            approximateResultCount: results.approximateResultCount,
            sparkline: results.sparkline,
            loading: false,
        })))
            .subscribe(newState => this.setState(newState), err => {
            this.setState({
                approximateResultCount: '!',
                loading: false,
            });
            console.error(err);
        }));
        this.refreshRequested.next(this.props.query);
    }
    componentWillReceiveProps(newProps) {
        this.componentUpdates.next(newProps);
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: `saved-query-row ${this.props.className}` },
            React.createElement(Link, { onClick: this.logEvent, to: '/search?' + buildSearchURLQuery({ query: this.props.query }) },
                React.createElement("div", { className: "saved-query-row__row" },
                    React.createElement("div", { className: "saved-query-row__row-column" },
                        React.createElement("div", { className: "saved-query-row__description" },
                            React.createElement("span", { "data-tooltip": truncate(this.props.query, { length: 50 }) }, this.props.description)),
                        this.props.actions),
                    React.createElement("div", { className: "saved-query-row__results-container" },
                        !this.state.loading &&
                            this.state.sparkline && (React.createElement("div", { "data-tooltip": "Results found in the last 30 days", className: "saved-query-row__sparkline" },
                            React.createElement(Sparkline, { data: this.state.sparkline, width: 100, height: 40, isLightTheme: this.props.isLightTheme }))),
                        this.state.loading ? (React.createElement("div", { className: "saved-query-row__results-items" },
                            React.createElement(LoadingSpinner, { className: "icon-inline" }))) : (React.createElement("div", { className: "saved-query-row__results-items" },
                            React.createElement("div", { className: "saved-query-row__result-count" }, this.state.approximateResultCount)))))),
            this.props.form));
    }
}
SavedQueryRow.defaultProps = { className: '' };
//# sourceMappingURL=SavedQueryRow.js.map