"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormRuleEditDialogRender = exports.RuleDataEditor = exports.XFormRuleEditDialog = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FormRule_1 = require("../Structure/FormRule");
const Link_1 = require("../../CommonUI/BuilderUI/Link");
const Button_1 = require("../../CommonUI/BuilderUI/Button");
const PropertyEditorSelect_1 = require("../../CommonUI/PropertyEditing/PropertyEditorSelect");
const PropertyEditorTextList_1 = require("../../CommonUI/PropertyEditing/PropertyEditorTextList");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const PropertyEditorBoolean_1 = require("../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorText_1 = require("../../CommonUI/PropertyEditing/PropertyEditorText");
const ExpressionConfiguration_1 = require("@appglue/common/dist/Expressions/ExpressionConfiguration");
const XFormRuleEditDialog = (props) => {
    const [rule, setRule] = (0, react_1.useState)(props.rule);
    return ((0, jsx_runtime_1.jsxs)(core_1.Dialog, { open: true, onClose: props.onClose, children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: rule, control: () => {
                    return ((0, jsx_runtime_1.jsxs)(exports.FormRuleEditDialogRender, { children: [(0, jsx_runtime_1.jsx)(Title, { children: "Edit Rule" }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: rule, propertyName: "ruleType", updateCallback: () => {
                                    switch (rule.ruleType) {
                                        case FormRule_1.FormRuleType.VALIDATION:
                                            rule.data = new FormRule_1.FormRuleValidationData("", "");
                                            break;
                                        case FormRule_1.FormRuleType.CHANGE_FOCUS:
                                            rule.data = new FormRule_1.FormRuleChangeFocusData("");
                                            break;
                                        case FormRule_1.FormRuleType.CHANGE_VALUE:
                                            let value = new ExpressionConfiguration_1.ExpressionConfiguration();
                                            value.inputData = () => {
                                                return props.form.getInputDefinition();
                                            };
                                            rule.data = new FormRule_1.FormRuleChangeValueData("", value);
                                            break;
                                        case FormRule_1.FormRuleType.EXIT_FORM:
                                            rule.data = new FormRule_1.FormRuleExitFormData("");
                                            break;
                                        case FormRule_1.FormRuleType.CONTROL_ENABLED:
                                            rule.data = new FormRule_1.FormRuleControlEnabledData("");
                                            break;
                                        case FormRule_1.FormRuleType.CONTROL_VISIBILITY:
                                            rule.data = new FormRule_1.FormRuleControlVisibilityData("");
                                            break;
                                    }
                                    StateManager_1.StateManager.propertiesChanged(rule, ["ruleType", "data"]);
                                }, options: [
                                    FormRule_1.FormRuleType.VALIDATION,
                                    FormRule_1.FormRuleType.CONTROL_ENABLED,
                                    FormRule_1.FormRuleType.CONTROL_VISIBILITY,
                                    FormRule_1.FormRuleType.CHANGE_VALUE,
                                    FormRule_1.FormRuleType.EXIT_FORM,
                                    FormRule_1.FormRuleType.CHANGE_FOCUS,
                                ], label: "Rule Type" }), (0, jsx_runtime_1.jsx)(PropertyEditorTextList_1.PropertyEditorTextList, { editObject: rule, propertyName: "watchingValues", updateCallback: () => {
                                    StateManager_1.StateManager.propertyChanged(rule, "watchingValues");
                                }, label: "Watching Values" }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: rule, propertyName: "enabled", updateCallback: () => {
                                    StateManager_1.StateManager.propertyChanged(rule, "watchingValues");
                                }, label: "Enabled" }), (0, jsx_runtime_1.jsx)(exports.RuleDataEditor, { rule: rule })] }));
                } }), (0, jsx_runtime_1.jsxs)(core_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: props.onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.StyledButton, { color: "primary", variant: "contained", onClick: () => props.updateCallback(rule), children: "Ok" })] })] }));
};
exports.XFormRuleEditDialog = XFormRuleEditDialog;
const RuleDataEditor = ({ rule }) => {
    switch (rule.ruleType) {
        case FormRule_1.FormRuleType.VALIDATION:
            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: rule.data, propertyName: "validationMessage", label: "Validation Message", updateCallback: () => {
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        } }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: rule.data, propertyName: "controlId", label: "Validation Break Control", updateCallback: () => {
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        }, options: rule.expression.getUsedVariables() })] }));
        case FormRule_1.FormRuleType.CHANGE_FOCUS:
            return ((0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: rule.data, propertyName: "controlId", label: "Control Id", updateCallback: () => {
                    StateManager_1.StateManager.propertyChanged(rule, "controlId");
                } }));
        case FormRule_1.FormRuleType.CHANGE_VALUE:
            return ((0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: rule.data, propertyName: "dataPath", label: "Data Path", updateCallback: () => {
                    StateManager_1.StateManager.propertyChanged(rule, "dataPath");
                } }));
        case FormRule_1.FormRuleType.EXIT_FORM:
            return ((0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: rule.data, propertyName: "exitOnPath", label: "Exist On Path", updateCallback: () => {
                    StateManager_1.StateManager.propertyChanged(rule, "exitOnPath");
                } }));
        case FormRule_1.FormRuleType.CONTROL_ENABLED:
            return ((0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: rule.data, propertyName: "controlId", label: "Control Id", updateCallback: () => {
                    StateManager_1.StateManager.propertyChanged(rule, "controlId");
                } }));
        case FormRule_1.FormRuleType.CONTROL_VISIBILITY:
            return ((0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: rule.data, propertyName: "controlId", label: "Control Id", updateCallback: () => {
                    StateManager_1.StateManager.propertyChanged(rule, "controlId");
                } }));
    }
};
exports.RuleDataEditor = RuleDataEditor;
exports.FormRuleEditDialogRender = styled_components_1.default.div `
    display: flex;
    width: 600px;
    padding: 10px 20px;
    flex-direction: column;

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

        &:first-child {
            margin-bottom: 20px !important;
        }
    }
`;
const Title = styled_components_1.default.div `
    font-size: 14px;
    font-weight: bold;

    padding: 10px 0;
    border-bottom: 1px solid rgba(39, 41, 50, 0.1);
`;
//# sourceMappingURL=XFormRuleEditDialog.js.map