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 ReportColumnTypeWizard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ReportColumnScope: this.props.data.ReportColumnScope,
        };
    }
    render() {
        return (React.createElement("div", { "data-name": 'report-select-columns' },
            React.createElement(WizardPanel, null,
                React.createElement(Flex, { flexDirection: "column", padding: 2 },
                    React.createElement(HelpBlock, { marginBottom: 1 }, "All columns 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.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
                    ' ',
                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only columns that are visible at the time the Report is exported will be included"),
                    React.createElement(Radio, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
                    ' ',
                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only selected columns (which you will choose in the next step) will be exported - whether visible or not"),
                    React.createElement(Radio, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == 'ScopeColumns', onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
                    ' '))));
    }
    onScopeSelectChanged(event) {
        let e = event.target;
        if (e.value == 'All') {
            this.setState({
                ReportColumnScope: 'AllColumns',
                SelectedColumnValues: [],
            }, () => this.props.updateGoBackState());
        }
        else if (e.value == 'Visible') {
            this.setState({
                ReportColumnScope: 'VisibleColumns',
                SelectedColumnValues: [],
            }, () => this.props.updateGoBackState());
        }
        else {
            this.setState({
                ReportColumnScope: 'ScopeColumns',
            }, () => this.props.updateGoBackState());
        }
    }
    canNext() {
        return (this.state.ReportColumnScope == 'AllColumns' ||
            this.state.ReportColumnScope == 'VisibleColumns' ||
            this.state.ReportColumnScope == 'ScopeColumns');
    }
    canBack() {
        return true;
    }
    next() {
        this.props.data.ReportColumnScope = this.state.ReportColumnScope;
        if (this.state.ReportColumnScope != 'ScopeColumns') {
            this.props.data.Scope = undefined;
        }
    }
    back() { }
    getIndexStepIncrement() {
        return this.state.ReportColumnScope == 'ScopeColumns' ? 1 : 2;
    }
    getIndexStepDecrement() {
        return 1;
    }
}
