import { upperFirst } from 'lodash';
import * as React from 'react';
import { merge, of, Subject, Subscription } from 'rxjs';
import { catchError, map, switchMap, tap } from 'rxjs/operators';
import { gql, mutateGraphQL } from '../../backend/graphql';
import { Form } from '../../components/Form';
import { eventLogger } from '../../tracking/eventLogger';
import { createAggregateError } from '../../util/errors';
export class AddUserEmailForm extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { email: '', error: null };
        this.submits = new Subject();
        this.subscriptions = new Subscription();
        this.onChange = e => this.setState({ email: e.currentTarget.value });
        this.onSubmit = e => this.submits.next(e);
        this.addUserEmail = (email) => mutateGraphQL(gql `
                mutation AddUserEmail($user: ID!, $email: String!) {
                    addUserEmail(user: $user, email: $email) {
                        alwaysNil
                    }
                }
            `, { user: this.props.user, email }).pipe(map(({ data, errors }) => {
            if (!data || (errors && errors.length > 0)) {
                throw createAggregateError(errors);
            }
            eventLogger.log('NewUserEmailAddressAdded');
        }));
    }
    componentDidMount() {
        this.subscriptions.add(this.submits
            .pipe(tap(e => e.preventDefault()), switchMap(() => merge(of({ error: undefined }), this.addUserEmail(this.state.email).pipe(tap(() => this.props.onDidAdd()), map(c => ({ error: null, email: '' })), catchError(error => [{ error, email: this.state.email }])))))
            .subscribe(stateUpdate => this.setState(stateUpdate), error => console.error(error)));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        const loading = this.state.error === undefined;
        return (React.createElement("div", { className: `add-user-email-form ${this.props.className || ''}` },
            React.createElement("h3", null, "Add email address"),
            React.createElement(Form, { className: "form-inline", onSubmit: this.onSubmit },
                React.createElement("label", { className: "sr-only", htmlFor: "AddUserEmailForm-email" }, "Email address"),
                React.createElement("input", { type: "email", name: "email", className: "form-control mr-sm-2", id: "AddUserEmailForm-email", onChange: this.onChange, size: 32, value: this.state.email, required: true, autoCorrect: "off", spellCheck: false, autoCapitalize: "off", readOnly: loading, placeholder: "Email" }),
                ' ',
                React.createElement("button", { type: "submit", className: "btn btn-primary", disabled: loading }, loading ? 'Adding...' : 'Add')),
            this.state.error && (React.createElement("div", { className: "alert alert-danger mt-2" }, upperFirst(this.state.error.message)))));
    }
}
//# sourceMappingURL=AddUserEmailForm.js.map