import * as React from 'react';
import { Flex } from 'rebass';
import { CheckBox } from '../../components/CheckBox';
import { ExpressionEditor } from '../../components/ExpressionEditor';
import Input from '../../components/Input';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
import { useMemo } from 'react';
export class ExpressionWizard extends React.Component {
    constructor(props) {
        super(props);
        this.handleCustomExpressionChange = (expression) => {
            this.setState({
                expression,
            }, () => this.props.updateGoBackState());
        };
        this.state = {
            // this is realy horrible but its only way to use the Expression Wizard for both Report (that has Query) and Format Column (that has Rule)
            // once we move to the new Wizard we can remove this monstrosity
            expression: this.props.callingModule && this.props.callingModule == 'Export'
                ? this.props.data.Query?.BooleanExpression
                : this.props.data.Rule?.BooleanExpression,
            saveToNamedQueries: false,
            newNamedQuery: '',
        };
    }
    render() {
        const initialData = useMemo(() => this.props.api.internalApi.getQueryPreviewData(), []);
        return (React.createElement(React.Fragment, null,
            React.createElement(ExpressionEditor, { type: 'boolean', module: NamedQueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: this.props.api.expressionApi.internalApi.getAvailableFields(), namedQueries: this.props.api.namedQueryApi.getNamedQueries(), api: this.props.api }),
            ' ',
            React.createElement(Flex, { flexDirection: "row", padding: 1, marginBottom: 2, marginLeft: 1, alignItems: "center", "data-name": "expression-wizard-save-option" },
                React.createElement(CheckBox, { marginLeft: 2, disabled: !this.isValidExpression(), marginBottom: 2, checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({
                        saveToNamedQueries: checked,
                    }, () => this.props.updateGoBackState()) }, "Save as new Named Query"),
                this.state.saveToNamedQueries && (React.createElement(Input, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
                        newNamedQuery: e.target.value,
                    }, () => this.props.updateGoBackState()) })))));
    }
    isValidExpression() {
        return (StringExtensions.IsNotNullOrEmpty(this.state.expression) &&
            this.props.api.internalApi
                .getQueryLanguageService()
                .validateBoolean(this.state.expression, NamedQueryModuleId).isValid);
    }
    canNext() {
        if (this.isValidExpression() == false) {
            return false;
        }
        if (this.state.saveToNamedQueries && StringExtensions.IsNullOrEmpty(this.state.newNamedQuery)) {
            return false;
        }
        return true;
    }
    canBack() {
        return true;
    }
    next() {
        this.props.callingModule == 'Export'
            ? (this.props.data.Query = {
                BooleanExpression: this.state.expression,
            })
            : (this.props.data.Rule = {
                BooleanExpression: this.state.expression,
            });
        if (this.state.saveToNamedQueries) {
            this.props.onSetNewNamedQuery(this.state.newNamedQuery);
        }
    }
    back() { }
    getIndexStepIncrement() {
        return 1;
    }
    getIndexStepDecrement() {
        return 1;
    }
}
