import { LoadingSpinner } from '@sourcegraph/react-loading-spinner';
import { upperFirst } from 'lodash';
import * as React from 'react';
import { Subject, Subscription } from 'rxjs';
import { catchError, filter, mergeMap, tap } from 'rxjs/operators';
import { ORG_NAME_MAX_LENGTH, VALID_ORG_NAME_REGEXP } from '..';
import { Form } from '../../components/Form';
import { PageTitle } from '../../components/PageTitle';
import { eventLogger } from '../../tracking/eventLogger';
import { createOrganization } from '../backend';
export class NewOrganizationPage extends React.Component {
    constructor(props) {
        super(props);
        this.submits = new Subject();
        this.subscriptions = new Subscription();
        this.onNameChange = event => {
            const hyphenatedName = event.currentTarget.value.replace(/\s/g, '-');
            this.setState({ name: hyphenatedName });
        };
        this.onDisplayNameChange = event => {
            this.setState({ displayName: event.currentTarget.value });
        };
        this.onSubmit = (event) => {
            this.submits.next(event);
        };
        this.state = {
            loading: false,
            name: '',
            displayName: '',
        };
    }
    componentDidMount() {
        eventLogger.logViewEvent('NewOrg');
        this.subscriptions.add(this.submits
            .pipe(tap(event => {
            event.preventDefault();
            eventLogger.log('CreateNewOrgClicked');
        }), filter(event => event.currentTarget.checkValidity()), mergeMap(event => createOrganization(this.state).pipe(catchError(error => {
            console.error(error);
            this.setState({ error });
            return [];
        }))))
            .subscribe(org => {
            this.props.history.push(`/organizations/${org.name}/settings`);
        }, error => {
            console.error(error);
        }));
    }
    render() {
        return (React.createElement("div", { className: "new-org-page" },
            React.createElement(PageTitle, { title: "New organization" }),
            React.createElement(Form, { className: "settings-form", onSubmit: this.onSubmit },
                React.createElement("h1", null, "Create a new organization"),
                React.createElement("p", null,
                    "An organization is a set of users with associated configuration. See",
                    ' ',
                    React.createElement("a", { href: "https://about.sourcegraph.com/docs/server/config/organizations" }, "Sourcegraph documentation"),
                    ' ',
                    "for information about configuring organizations."),
                this.state.error && React.createElement("p", { className: "alert alert-danger" }, upperFirst(this.state.error.message)),
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", { htmlFor: "new-org-page__form-name" }, "Organization name"),
                    React.createElement("input", { id: "new-org-page__form-name", type: "text", className: "form-control", placeholder: "acme-corp", pattern: VALID_ORG_NAME_REGEXP, maxLength: ORG_NAME_MAX_LENGTH, required: true, autoCorrect: "off", autoComplete: "off", autoFocus: true, value: this.state.name, onChange: this.onNameChange, disabled: this.state.loading, "aria-describedby": "new-org-page__form-name-help" }),
                    React.createElement("small", { id: "new-org-page__form-name-help", className: "form-text text-muted" }, "An organization name consists of letters, numbers, hyphens (-) and may not begin or end with a hyphen")),
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", { htmlFor: "new-org-page__form-display-name" }, "Display name"),
                    React.createElement("input", { id: "new-org-page__form-display-name", type: "text", className: "form-control", placeholder: "ACME Corporation", autoCorrect: "off", value: this.state.displayName, onChange: this.onDisplayNameChange, disabled: this.state.loading })),
                React.createElement("button", { type: "submit", className: "btn btn-primary", disabled: this.state.loading }, "Create organization"),
                this.state.loading && React.createElement(LoadingSpinner, { className: "icon-inline" }))));
    }
}
//# sourceMappingURL=NewOrganizationPage.js.map