import { LoadingSpinner } from '@sourcegraph/react-loading-spinner';
import * as React from 'react';
import { catchError } from 'rxjs/operators';
import { FeedbackText } from '../components/FeedbackText';
import { Form } from '../components/Form';
import { HeroPage } from '../components/HeroPage';
import { PageTitle } from '../components/PageTitle';
import { eventLogger } from '../tracking/eventLogger';
import { submitSurvey } from './backend';
import { SurveyCTA } from './SurveyToast';
class SurveyForm extends React.Component {
    constructor(props) {
        super(props);
        this.onScoreChange = (score) => {
            if (this.props.onScoreChange) {
                this.props.onScoreChange(score);
            }
            this.setState({ error: undefined });
        };
        this.onEmailFieldChange = (e) => {
            this.setState({ email: e.target.value });
        };
        this.onReasonFieldChange = (e) => {
            this.setState({ reason: e.target.value });
        };
        this.onBetterProductFieldChange = (e) => {
            this.setState({ betterProduct: e.target.value });
        };
        this.handleSubmit = (event) => {
            event.preventDefault();
            if (this.state.loading) {
                return;
            }
            if (this.props.score === undefined) {
                this.setState({ error: new Error('Please select a score') });
                return;
            }
            eventLogger.log('SurveySubmitted');
            this.setState({ loading: true });
            submitSurvey({
                score: this.props.score,
                email: this.state.email,
                reason: this.state.reason,
                better: this.state.betterProduct,
            })
                .pipe(catchError(error => {
                this.setState({ error });
                return [];
            }))
                .subscribe(() => {
                this.props.onSubmit();
                this.props.history.push('/survey/thanks');
            });
        };
        this.state = {
            reason: '',
            betterProduct: '',
            email: '',
            loading: false,
        };
    }
    render() {
        return (React.createElement(Form, { className: "survey-form", onSubmit: this.handleSubmit },
            this.state.error && React.createElement("p", { className: "survey-form__error" }, this.state.error.message),
            React.createElement("label", { className: "survey-form__label" }, "How likely is it that you would recommend Sourcegraph to a friend?"),
            React.createElement(SurveyCTA, { className: "survey-form__scores", onClick: this.onScoreChange, score: this.props.score }),
            !this.props.user && (React.createElement("div", { className: "form-group" },
                React.createElement("input", { className: `form-control survey-form__input`, type: "text", placeholder: "Email", onChange: this.onEmailFieldChange, value: this.state.email, disabled: this.state.loading }))),
            React.createElement("div", { className: "form-group" },
                React.createElement("label", { className: "survey-form__label" }, "What is the most important reason for the score you gave Sourcegraph?"),
                React.createElement("textarea", { className: `form-control survey-form__input`, onChange: this.onReasonFieldChange, value: this.state.reason, disabled: this.state.loading, autoFocus: true })),
            React.createElement("div", { className: "form-group" },
                React.createElement("label", { className: "survey-form__label" }, "What could Sourcegraph do to provide a better product?"),
                React.createElement("textarea", { className: `form-control survey-form__input`, onChange: this.onBetterProductFieldChange, value: this.state.betterProduct, disabled: this.state.loading })),
            React.createElement("div", { className: "form-group" },
                React.createElement("button", { className: "btn btn-primary btn-block", type: "submit", disabled: this.state.loading }, "Submit")),
            this.state.loading && (React.createElement("div", { className: "survey-form__loader" },
                React.createElement(LoadingSpinner, { className: "icon-inline" }))),
            React.createElement("div", null,
                React.createElement("small", null, "Your response to this survey will be sent to Sourcegraph, and will be visible to your Sourcegraph site admins."))));
    }
}
export class SurveyPage extends React.Component {
    constructor(props) {
        super(props);
        this.intScore = (score) => (!!score ? Math.max(0, Math.min(10, Math.round(+score))) : undefined);
        this.onSubmit = () => this.setState({ complete: true });
    }
    componentDidMount() {
        eventLogger.logViewEvent('Survey');
    }
    render() {
        if (this.props.match.params.score === 'thanks') {
            return (React.createElement("div", { className: "survey-page" },
                React.createElement(PageTitle, { title: "Thanks" }),
                React.createElement(HeroPage, { title: "Thank you for sending feedback.", cta: React.createElement(FeedbackText, { headerText: "Anything else?" }) })));
        }
        return (React.createElement("div", { className: "survey-page" },
            React.createElement(PageTitle, { title: "Almost there..." }),
            React.createElement(HeroPage, { title: "Almost there...", cta: React.createElement(SurveyForm, Object.assign({ score: this.intScore(this.props.match.params.score), onSubmit: this.onSubmit }, this.props)) })));
    }
}
//# sourceMappingURL=SurveyPage.js.map