import DotsHorizontalIcon from 'mdi-react/DotsHorizontalIcon';
import * as React from 'react';
import { Form } from '../../components/Form';
import { eventLogger } from '../../tracking/eventLogger';
/**
 * Header for the repository compare area.
 */
export class RepositoryCompareHeader extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            comparisonBaseSpec: this.props.base.rev || '',
            comparisonHeadSpec: this.props.head.rev || '',
        };
        this.onChange = e => {
            this.setState((e.currentTarget.id === RepositoryCompareHeader.BASE_INPUT_ID
                ? { comparisonBaseSpec: e.currentTarget.value }
                : { comparisonHeadSpec: e.currentTarget.value }));
        };
        this.onSubmit = e => {
            e.preventDefault();
            eventLogger.log('RepositoryComparisonSubmitted');
            this.props.onUpdateComparisonSpec(this.state.comparisonBaseSpec, this.state.comparisonHeadSpec);
        };
        this.onCancel = e => {
            e.preventDefault();
            eventLogger.log('RepositoryComparisonCanceled');
            this.setState({
                comparisonBaseSpec: this.props.base.rev || '',
                comparisonHeadSpec: this.props.head.rev || '',
            });
        };
    }
    render() {
        // Whether the user has entered new base/head values that differ from what's in the props and has not yet
        // submitted the form.
        const stateDiffers = this.state.comparisonBaseSpec !== (this.props.base.rev || '') ||
            this.state.comparisonHeadSpec !== (this.props.head.rev || '');
        const specIsEmpty = this.props.base === null && this.props.head === null;
        return (React.createElement("div", { className: `repository-compare-header area-header ${this.props.className}` },
            React.createElement("div", { className: `${this.props.className}-inner` },
                React.createElement(Form, { className: "form-inline mb-2", onSubmit: this.onSubmit },
                    React.createElement("label", { htmlFor: RepositoryCompareHeader.BASE_INPUT_ID, className: "sr-only" }, "Base Git revspec for comparison"),
                    React.createElement("input", { type: "text", id: RepositoryCompareHeader.BASE_INPUT_ID, className: "form-control mr-2 mb-2", value: this.state.comparisonBaseSpec, onChange: this.onChange, placeholder: "HEAD", size: 12, autoCapitalize: "off", spellCheck: false, autoCorrect: "off", autoComplete: "off" }),
                    React.createElement(DotsHorizontalIcon, { className: "icon-inline mr-2 mb-2" }),
                    React.createElement("label", { htmlFor: RepositoryCompareHeader.HEAD_INPUT_ID, className: "sr-only" }, "Head Git revspec for comparison"),
                    React.createElement("input", { type: "text", id: RepositoryCompareHeader.HEAD_INPUT_ID, className: "form-control mr-2 mb-2", value: this.state.comparisonHeadSpec, onChange: this.onChange, placeholder: "HEAD", size: 12, autoCapitalize: "off", spellCheck: false, autoCorrect: "off", autoComplete: "off" }),
                    (stateDiffers || specIsEmpty) && (React.createElement("button", { type: "submit", className: "btn btn-primary mr-2 mb-2" }, stateDiffers ? 'Update comparison' : 'Compare')),
                    stateDiffers &&
                        !specIsEmpty && (React.createElement("button", { type: "reset", className: "btn btn-secondary mb-2", onClick: this.onCancel }, "Cancel"))))));
    }
}
RepositoryCompareHeader.BASE_INPUT_ID = 'repository-compare-header__base-spec';
RepositoryCompareHeader.HEAD_INPUT_ID = 'repository-compare-header__head-spec';
//# sourceMappingURL=RepositoryCompareHeader.js.map