import * as React from 'react';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import WizardPanel from '../../../components/WizardPanel';
import Input from '../../../components/Input';
import { Text } from 'rebass';
import ErrorBox from '../../../components/ErrorBox';
import FormLayout, { FormRow } from '../../../components/FormLayout';
export class ReportSettingsWizard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ReportName: this.props.data.Name,
            ErrorMessage: null,
        };
    }
    render() {
        let validationState = StringExtensions.IsNullOrEmpty(this.state.ErrorMessage)
            ? null
            : 'error';
        return (React.createElement("div", { "data-name": 'report-settings' },
            React.createElement(WizardPanel, null,
                React.createElement(FormLayout, { columns: [1, 2] },
                    React.createElement(FormRow, null,
                        React.createElement(Text, { marginRight: 2 }, "Enter Report Name:"),
                        React.createElement(Input, { width: "100%", type: "text", placeholder: "Name", value: this.state.ReportName, onChange: (e) => this.onReportNameChanged(e) })),
                    React.createElement(FormRow, null,
                        React.createElement(React.Fragment, null),
                        this.state.ErrorMessage ? React.createElement(ErrorBox, null, this.state.ErrorMessage) : null)))));
    }
    onReportNameChanged(event) {
        let e = event.target;
        this.setState({
            ReportName: e.value,
            ErrorMessage: this.props.Reports.findIndex((x) => x.Name == e.value) > -1
                ? 'A Report already exists with that name'
                : null,
        }, () => this.props.updateGoBackState());
    }
    canNext() {
        return (StringExtensions.IsNotNullOrEmpty(this.state.ReportName) &&
            StringExtensions.IsNullOrEmpty(this.state.ErrorMessage));
    }
    canBack() {
        return true;
    }
    next() {
        this.props.data.Name = this.state.ReportName;
    }
    back() { }
    getIndexStepIncrement() {
        return 1;
    }
    getIndexStepDecrement() {
        return this.props.data.ReportRowScope == 'ExpressionRows' ? 1 : 2;
    }
}
