import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { Dialog, DialogActions } from "@material-ui/core";
import styled from "styled-components";
import { FormRuleType, FormRuleValidationData, FormRuleChangeFocusData, FormRuleChangeValueData, FormRuleExitFormData, FormRuleControlEnabledData, FormRuleControlVisibilityData, } from "../FormRule";
import { StyledLink } from "../../CommonUI/BuildUI/Link";
import { StyledButton } from "../../CommonUI/BuildUI/Button";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { PropertyEditorTextList } from "../../CommonUI/PropertyEditing/PropertyEditorTextList";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { XExpressionDefinition } from "../../Expressions/XExpressionDefinition";
export const XFormRuleEditDialog = (props) => {
    const [rule, setRule] = useState(props.rule);
    return (_jsxs(Dialog, Object.assign({ open: true, onClose: props.onClose }, { children: [_jsx(ObserveState, { listenTo: rule, control: () => {
                    return (_jsxs(FormRuleEditDialogRender, { children: [_jsx(Title, { children: "Edit Rule" }, void 0),
                            _jsx(PropertyEditorSelect, { editObject: rule, propertyName: "ruleType", updateCallback: () => {
                                    switch (rule.ruleType) {
                                        case FormRuleType.VALIDATION:
                                            rule.data = new FormRuleValidationData("", "");
                                            break;
                                        case FormRuleType.CHANGE_FOCUS:
                                            rule.data = new FormRuleChangeFocusData("");
                                            break;
                                        case FormRuleType.CHANGE_VALUE:
                                            let value = new XExpressionDefinition();
                                            value.inputData = () => {
                                                return props.form.getInputDefinition();
                                            };
                                            rule.data = new FormRuleChangeValueData("", value);
                                            break;
                                        case FormRuleType.EXIT_FORM:
                                            rule.data = new FormRuleExitFormData("");
                                            break;
                                        case FormRuleType.CONTROL_ENABLED:
                                            rule.data = new FormRuleControlEnabledData("");
                                            break;
                                        case FormRuleType.CONTROL_VISIBILITY:
                                            rule.data = new FormRuleControlVisibilityData("");
                                            break;
                                    }
                                    StateManager.propertiesChanged(rule, ["ruleType", "data"]);
                                }, options: [
                                    FormRuleType.VALIDATION,
                                    FormRuleType.CONTROL_ENABLED,
                                    FormRuleType.CONTROL_VISIBILITY,
                                    FormRuleType.CHANGE_VALUE,
                                    FormRuleType.EXIT_FORM,
                                    FormRuleType.CHANGE_FOCUS,
                                ], label: "Rule Type" }, void 0),
                            _jsx(PropertyEditorTextList, { editObject: rule, propertyName: "watchingValues", updateCallback: () => {
                                    StateManager.propertyChanged(rule, "watchingValues");
                                }, label: "Watching Values" }, void 0),
                            _jsx(PropertyEditorBoolean, { editObject: rule, propertyName: "enabled", updateCallback: () => {
                                    StateManager.propertyChanged(rule, "watchingValues");
                                }, label: "Enabled" }, void 0),
                            _jsx(RuleDataEditor, { rule: rule }, void 0)] }, void 0));
                } }, void 0),
            _jsxs(DialogActions, { children: [_jsx(StyledLink, Object.assign({ onClick: props.onClose }, { children: "Cancel" }), void 0),
                    _jsx(StyledButton, Object.assign({ color: "primary", variant: "contained", onClick: () => props.updateCallback(rule) }, { children: "Ok" }), void 0)] }, void 0)] }), void 0));
};
export const RuleDataEditor = ({ rule }) => {
    switch (rule.ruleType) {
        case FormRuleType.VALIDATION:
            return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorText, { editObject: rule.data, propertyName: "validationMessage", label: "Validation Message", updateCallback: () => {
                            StateManager.propertyChanged(rule, "data");
                        } }, void 0),
                    _jsx(PropertyEditorSelect, { editObject: rule.data, propertyName: "controlId", label: "Validation Break Control", updateCallback: () => {
                            StateManager.propertyChanged(rule, "data");
                        }, options: rule.expression.getUsedVariables() }, void 0)] }, void 0));
        case FormRuleType.CHANGE_FOCUS:
            return (_jsx(PropertyEditorText, { editObject: rule.data, propertyName: "controlId", label: "Control Id", updateCallback: () => {
                    StateManager.propertyChanged(rule, "controlId");
                } }, void 0));
        case FormRuleType.CHANGE_VALUE:
            return (_jsx(PropertyEditorText, { editObject: rule.data, propertyName: "dataPath", label: "Data Path", updateCallback: () => {
                    StateManager.propertyChanged(rule, "dataPath");
                } }, void 0));
        case FormRuleType.EXIT_FORM:
            return (_jsx(PropertyEditorText, { editObject: rule.data, propertyName: "exitOnPath", label: "Exist On Path", updateCallback: () => {
                    StateManager.propertyChanged(rule, "exitOnPath");
                } }, void 0));
        case FormRuleType.CONTROL_ENABLED:
            return (_jsx(PropertyEditorText, { editObject: rule.data, propertyName: "controlId", label: "Control Id", updateCallback: () => {
                    StateManager.propertyChanged(rule, "controlId");
                } }, void 0));
        case FormRuleType.CONTROL_VISIBILITY:
            return (_jsx(PropertyEditorText, { editObject: rule.data, propertyName: "controlId", label: "Control Id", updateCallback: () => {
                    StateManager.propertyChanged(rule, "controlId");
                } }, void 0));
    }
};
export const FormRuleEditDialogRender = styled.div `
    display: flex;
    width: 600px;
    padding: 10px 20px;
    flex-direction: column;

    > * {
        margin-bottom: 10px !important;

        &:first-child {
            margin-bottom: 20px !important;
        }
    }
`;
const Title = styled.div `
    font-size: 14px;
    font-weight: bold;
    font-family: Inter;
    padding: 10px 0;
    border-bottom: 1px solid rgba(39, 41, 50, 0.1);
`;
//# sourceMappingURL=XFormRuleEditDialog.js.map