import * as React from 'react';
import WizardPanel from '../../../components/WizardPanel';
import Radio from '../../../components/Radio';
import { Flex } from 'rebass';
import HelpBlock from '../../../components/HelpBlock';
export class ReportRowTypeWizard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ReportRowScope: this.props.data.ReportRowScope,
        };
    }
    render() {
        return (React.createElement("div", { "data-name": 'report-select-rows' },
            React.createElement(WizardPanel, null,
                React.createElement(Flex, { flexDirection: "column", padding: 2 },
                    React.createElement(HelpBlock, { marginBottom: 1 }, "All rows in the datasource will be included in the report, whether visible or not at time of export."),
                    React.createElement(Radio, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
                    ' ',
                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only rows that are visible at the time the Report is exported will be included in the Export"),
                    React.createElement(Radio, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
                    ' ',
                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only the rows which match the Query (built in next step) will be exported - whether visible or not."),
                    React.createElement(Radio, { value: "Expression", checked: this.state.ReportRowScope == 'ExpressionRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "By Query - built by you in next step"),
                    ' '))));
    }
    onScopeSelectChanged(event) {
        let e = event.target;
        if (e.value == 'All') {
            this.setState({
                ReportRowScope: 'AllRows',
                SelectedColumnValues: [],
            }, () => this.props.updateGoBackState());
        }
        else if (e.value == 'Visible') {
            this.setState({
                ReportRowScope: 'VisibleRows',
                SelectedColumnValues: [],
            }, () => this.props.updateGoBackState());
        }
        else {
            this.setState({
                ReportRowScope: 'ExpressionRows',
            }, () => this.props.updateGoBackState());
        }
    }
    canNext() {
        return (this.state.ReportRowScope == 'AllRows' ||
            this.state.ReportRowScope == 'VisibleRows' ||
            this.state.ReportRowScope == 'ExpressionRows');
    }
    canBack() {
        return true;
    }
    next() {
        this.props.data.ReportRowScope = this.state.ReportRowScope;
        if (this.props.data.Query && this.state.ReportRowScope != 'ExpressionRows') {
            this.props.data.Query = undefined;
        }
    }
    back() { }
    getIndexStepIncrement() {
        return this.state.ReportRowScope == 'ExpressionRows' ? 1 : 2;
    }
    getIndexStepDecrement() {
        return this.props.data.ReportColumnScope == 'ScopeColumns' ? 1 : 2;
    }
}
