import InformationVariantIcon from 'mdi-react/InformationVariantIcon';
import * as React from 'react';
import { throwError } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { createThread } from '../../../discussions/backend';
import { eventLogger } from '../../../tracking/eventLogger';
import { asError } from '../../../util/errors';
import { parseHash } from '../../../util/url';
import { DiscussionsInput, TitleMode } from './DiscussionsInput';
import { DiscussionsNavbar } from './DiscussionsNavbar';
export class DiscussionsCreate extends React.PureComponent {
    constructor(props) {
        super(props);
        this.onSubmit = (title, contents) => {
            eventLogger.log('CreatedDiscussion');
            const lpr = parseHash(window.location.hash);
            // lpr is one-based, discussions is zero-based (like LSP).
            // lpr endings are inclusive, discussions is exclusive (like LSP).
            const startLine = lpr.line ? lpr.line - 1 : 0;
            const startCharacter = lpr.character ? lpr.character - 1 : 0;
            const endLine = lpr.endLine ? lpr.endLine : startLine + 1;
            const endCharacter = lpr.endCharacter || 0;
            return createThread({
                title,
                contents,
                targetRepo: {
                    repositoryID: this.props.repoID,
                    path: this.props.filePath,
                    branch: this.props.rev,
                    revision: this.props.commitID,
                    selection: {
                        startLine,
                        startCharacter,
                        endLine,
                        endCharacter,
                        // TODO(slimsag:discussions): Even though these fields are declared as
                        // nullable in the GraphQL schema ("lines: [String!]"), graphqlschema.ts
                        // not generate the proper nullable type, so we must cast to any.
                        //
                        // See https://github.com/sourcegraph/sourcegraph/issues/13098
                        linesBefore: null,
                        lines: null,
                        linesAfter: null,
                    },
                },
            }).pipe(tap(thread => {
                const location = this.props.location;
                const hash = new URLSearchParams(location.hash.slice('#'.length));
                hash.set('tab', 'discussions');
                hash.set('threadID', thread.id);
                // TODO(slimsag:discussions): ASAP: focus the new thread's range
                this.props.history.push(location.pathname + location.search + '#' + hash.toString());
            }), map(thread => undefined), catchError(e => throwError('Error creating thread: ' + asError(e).message)));
        };
        this.onTitleChange = (newTitle) => this.setState({ title: newTitle });
        this.state = {};
    }
    render() {
        return (React.createElement("div", { className: "discussions-create" },
            React.createElement(DiscussionsNavbar, Object.assign({}, this.props, { threadTitle: this.state.title })),
            React.createElement("div", { className: "discussions-create__content" },
                this.state.title &&
                    this.state.title.length > 60 && (React.createElement("div", { className: "alert alert-info p-1 mt-3 ml-3 mr-3 mb-0" },
                    React.createElement("small", null,
                        React.createElement(InformationVariantIcon, { className: "icon-inline" }),
                        "The first line of your message will become the title of your discussion. A good title is usually 50 characters or less."))),
                React.createElement(DiscussionsInput, Object.assign({ submitLabel: "Create discussion", titleMode: TitleMode.Implicit, onTitleChange: this.onTitleChange, onSubmit: this.onSubmit }, this.props)))));
    }
}
//# sourceMappingURL=DiscussionsCreate.js.map