import PuzzleIcon from 'mdi-react/PuzzleIcon';
import * as React from 'react';
import { matchPath } from 'react-router';
import { Subscription } from 'rxjs';
import { siteFlags } from '../site/backend';
import { eventLogger } from '../tracking/eventLogger';
import { showDotComMarketing } from '../util/features';
import { Toast } from './Toast';
import { daysActiveCount } from './util';
const HAS_DISMISSED_TOAST_KEY = 'has-dismissed-integrations-toast';
/**
 * Renders a toast as long as the query contains toast=integrations. This toast will be rendered after sign-up and sign-in, if the
 * toast has already been dismissed we will not display the toast.
 */
export class IntegrationsToast extends React.Component {
    constructor(props) {
        super(props);
        this.subscriptions = new Subscription();
        this.showToast = () => {
            this.setState(() => ({ visible: true }));
            eventLogger.log('IntegrationsToastViewed');
        };
        this.onClickConfigure = () => {
            eventLogger.log('IntegrationsToastClicked');
            this.dismissToast();
        };
        this.onDismiss = () => {
            eventLogger.log('IntegrationsToastDismissed');
            this.dismissToast();
        };
        this.dismissToast = () => {
            localStorage.setItem(HAS_DISMISSED_TOAST_KEY, 'true');
            this.setState({ visible: false });
        };
        this.state = {
            visible: false,
        };
    }
    updateToastVisibility(query) {
        const canShow = localStorage.getItem(HAS_DISMISSED_TOAST_KEY) !== 'true' && !showDotComMarketing;
        if (!canShow) {
            return;
        }
        // Check if we explictily set the toast to be visible.
        const parsedQuery = new URLSearchParams(location.search);
        if (parsedQuery && parsedQuery.get('toast') === 'integrations') {
            this.showToast();
            return;
        }
        // Do not show integrations toast on /search or /search?q= routes if it is their first session. Otherwise, show it.
        const match = matchPath(location.pathname, { path: '/search' });
        if (match && daysActiveCount <= 1) {
            return;
        }
        this.showToast();
    }
    componentDidMount() {
        this.subscriptions.add(siteFlags.subscribe(siteFlags => this.setState({ siteFlags })));
        this.updateToastVisibility(this.props.history.location.search);
        this.unlisten = this.props.history.listen(location => {
            this.updateToastVisibility(location.search);
        });
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
        if (this.unlisten) {
            this.unlisten();
        }
    }
    render() {
        if (!this.state.visible) {
            return null;
        }
        if (this.state.siteFlags) {
            if (this.state.siteFlags.needsRepositoryConfiguration || this.state.siteFlags.noRepositoriesEnabled) {
                return null;
            }
        }
        return (React.createElement(Toast, { icon: React.createElement(PuzzleIcon, { className: "icon-inline" }), title: "Configure Integrations", subtitle: "Get Sourcegraph code search while reading code on GitHub and more.", cta: React.createElement("div", null,
                React.createElement("a", { target: "_blank", href: "https://about.sourcegraph.com/docs/integrations/" },
                    React.createElement("button", { type: "button", className: "btn btn-primary", onClick: this.onClickConfigure }, "Configure"))), onDismiss: this.onDismiss }));
    }
}
//# sourceMappingURL=IntegrationsToast.js.map