import { LoadingSpinner } from '@sourcegraph/react-loading-spinner';
import { upperFirst } from 'lodash';
import * as React from 'react';
import { of, Subject, Subscription } from 'rxjs';
import { catchError, concat, delay, distinctUntilChanged, mergeMap, startWith, switchMap, tap } from 'rxjs/operators';
import { ORG_DISPLAY_NAME_MAX_LENGTH } from '..';
import { Form } from '../../components/Form';
import { PageTitle } from '../../components/PageTitle';
import { eventLogger } from '../../tracking/eventLogger';
import { updateOrganization } from '../backend';
/**
 * The organization profile page.
 */
export class OrgAccountProfilePage extends React.PureComponent {
    constructor(props) {
        super(props);
        this.orgChanges = new Subject();
        this.submits = new Subject();
        this.subscriptions = new Subscription();
        this.onDisplayNameFieldChange = (e) => {
            this.setState({ displayName: e.target.value });
        };
        this.onSubmit = (e) => {
            e.preventDefault();
            this.submits.next();
        };
        this.state = {
            displayName: props.org.displayName || '',
            loading: false,
            updated: false,
        };
    }
    componentDidMount() {
        this.subscriptions.add(this.orgChanges
            .pipe(distinctUntilChanged(), tap(org => eventLogger.logViewEvent('OrgAccountProfile', { organization: { org_name: org.name } })))
            .subscribe());
        this.orgChanges.next(this.props.org);
        this.subscriptions.add(this.submits
            .pipe(switchMap(() => updateOrganization(this.props.org.id, this.state.displayName).pipe(tap(() => this.props.onOrganizationUpdate()), mergeMap(() => 
        // Reset email, reenable submit button, flash "updated" text
        of({ loading: false, updated: true })
            // Hide "updated" text again after 1s
            .pipe(concat(of({ updated: false }).pipe(delay(1000))))), catchError((error) => [{ error: error.message, loading: false }]), 
        // Disable button while loading
        startWith({ loading: true, error: undefined }))))
            .subscribe(state => this.setState(state)));
        // TODO(sqs): handle errors
    }
    componentWillReceiveProps(props) {
        if (props.org !== this.props.org) {
            this.orgChanges.next(props.org);
        }
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: "org-account-profile-page" },
            React.createElement(PageTitle, { title: this.props.org.name }),
            React.createElement("h2", null, "Organization profile"),
            React.createElement(Form, { className: "org-account-profile-page", onSubmit: this.onSubmit },
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", null, "Display name"),
                    React.createElement("input", { type: "text", className: "form-control org-account-profile-page__display-name", placeholder: "Organization name", onChange: this.onDisplayNameFieldChange, value: this.state.displayName, spellCheck: false, maxLength: ORG_DISPLAY_NAME_MAX_LENGTH })),
                React.createElement("button", { type: "submit", disabled: this.state.loading, className: "btn btn-primary org-account-profile-page__submit-button" }, "Update"),
                this.state.loading && React.createElement(LoadingSpinner, { className: "icon-inline" }),
                React.createElement("div", { className: 'org-account-profile-page__updated-text' +
                        (this.state.updated ? ' org-account-profile-page__updated-text--visible' : '') },
                    React.createElement("small", null, "Updated!")),
                this.state.error && React.createElement("div", { className: "alert alert-danger" }, upperFirst(this.state.error)))));
    }
}
//# sourceMappingURL=OrgAccountProfilePage.js.map