"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RuleDataPropertyEditor = exports.XFormRuleRow = 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 react_beautiful_dnd_1 = require("react-beautiful-dnd");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const VariablePicker_1 = tslib_1.__importDefault(require("../../CommonUI/VariablePicker"));
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const InlineTextEdit_1 = require("../../CommonUI/InlineTextEdit");
const FormRule_1 = require("../Structure/FormRule");
const AttentionIcon_1 = require("../../CommonUI/Icon/AttentionIcon");
const UICheckbox_1 = require("../../CommonUI/BuildlingBlocks/UICheckbox");
const UISwitch_1 = require("../../CommonUI/BuildlingBlocks/UISwitch");
const ExpressionView_1 = require("../../Expressions/Builder/ExpressionView");
const DeleteIcon_1 = require("../../CommonUI/Icon/DeleteIcon");
const UIFormControlLabel_1 = require("../../CommonUI/BuildlingBlocks/UIFormControlLabel");
const UISelect_1 = require("../../CommonUI/BuildlingBlocks/UISelect");
const UIRadioGroup_1 = tslib_1.__importDefault(require("../../CommonUI/BuildlingBlocks/UIRadioGroup"));
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const CloseGrayIcon_1 = require("../../CommonUI/Icon/CloseGrayIcon");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const XFormRuleRow = ({ form, rule, index, onAction, }) => {
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: rule, control: () => {
            let designIssues = rule.getDesignValidationIssues(form);
            let expressionIssues = rule.expression.expressionRoot.getValidationIssues();
            return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: "ruleRowDrag" + index, index: index, children: (provided) => {
                    return ((0, jsx_runtime_1.jsxs)(StyledTableRow, { ref: (node) => {
                            provided.innerRef(node);
                        }, ...provided.draggableProps, ...provided.dragHandleProps, children: [(0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(CellRender, { children: [(0, jsx_runtime_1.jsxs)(UISelect_1.UISelect, { value: rule.ruleType, fullWidth: true, onChange: (event) => {
                                                rule.ruleType = event.target.value;
                                                StateManager_1.StateManager.propertiesChanged(rule, ["ruleType", "data"]);
                                            }, "data-testid": "XFormRule-ruleType", children: [(0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: FormRule_1.FormRuleType.CHANGE_FOCUS, children: FormRule_1.FormRuleType.CHANGE_FOCUS }), (0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: FormRule_1.FormRuleType.CHANGE_VALUE, children: FormRule_1.FormRuleType.CHANGE_VALUE }), (0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: FormRule_1.FormRuleType.CONTROL_ENABLED, children: FormRule_1.FormRuleType.CONTROL_ENABLED }), (0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: FormRule_1.FormRuleType.CONTROL_VISIBILITY, children: FormRule_1.FormRuleType.CONTROL_VISIBILITY }), (0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: FormRule_1.FormRuleType.EXIT_FORM, children: FormRule_1.FormRuleType.EXIT_FORM }), (0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: FormRule_1.FormRuleType.VALIDATION, children: FormRule_1.FormRuleType.VALIDATION })] }), (0, jsx_runtime_1.jsx)(WatchValuesRender, { "data-testid": "XFormRule-watchingValues", children: (0, jsx_runtime_1.jsx)(CheckboxListLayer, { items: form.getAllFormData().map((f) => ({ label: f.name })), onChange: (mode, newValues) => {
                                                    rule.watchingValuesMode = mode;
                                                    rule.watchingValues = newValues;
                                                    StateManager_1.StateManager.propertyChanged(rule, "watchingValues");
                                                }, value: rule.watchingValues, placeholder: "Select watching values...", label: "Run Rules On Value Change", valueMode: rule.watchingValuesMode }) })] }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(CellRender, { align: "center", "data-testid": "XFormRule-formEnabled", children: (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: rule.enabled, onSet: (newValue) => {
                                                rule.enabled = newValue;
                                                StateManager_1.StateManager.propertyChanged(rule, "enabled");
                                            } }), label: "" }) }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(CellRender, { "data-testid": "XFormRule-expressions", children: (0, jsx_runtime_1.jsxs)(ExpressionViewRender, { children: [(0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: rule.expression, color: {
                                                    result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                                    expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                                    variable: "rgba(39, 41, 50, 0.6)",
                                                    value: "rgb(39, 41, 50)",
                                                    // bracket: {
                                                    //     default: UIStyleConstants.BLUE_COLOR,
                                                    //     error: "#EE3E54",
                                                    //     warning: "#F4955F",
                                                    // },
                                                }, hideValidation: true }), expressionIssues.length > 0 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: expressionIssues[0].issue, children: (0, jsx_runtime_1.jsx)("div", { className: "error-icon", children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) }) }))] }) }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(CellRender, { children: (0, jsx_runtime_1.jsxs)(OtherParameters, { "data-testid": "XFormRule-otherparameters", children: [(0, jsx_runtime_1.jsx)(exports.RuleDataPropertyEditor, { rule: rule, form: form }), designIssues.length > 0 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: designIssues[0].issue, children: (0, jsx_runtime_1.jsx)("div", { className: "error-icon", children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) }) }))] }) }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(CellRender, { "data-testid": "XFormRule-actions", children: (0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: (event) => {
                                            onAction(event.currentTarget);
                                        }, className: "ActionButton", children: (0, jsx_runtime_1.jsx)(DeleteIcon_1.DeleteIcon, {}) }) }) })] }));
                } }));
        } }));
};
exports.XFormRuleRow = XFormRuleRow;
const CellRender = styled_components_1.default.div `
    ${(props) => (props.hideBorder ? `border-left: none;` : `border-left: solid 1px rgba(39, 41, 50, 0.05);`)}

    display: flex;
    padding: 0 16px;
    align-items: ${(props) => props.align || "start"};
    min-height: 82px;

    flex-direction: column;

    position: relative;

    .MuiFormControlLabel-root {
        margin-left: 0;
    }
`;
const StyledTableRow = (0, styled_components_1.default)(core_1.TableRow) `
    > td {
        border-bottom: 1px solid rgba(39, 41, 50, 0.05);
    }

    position: relative;

    .error-icon {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
`;
const WatchValuesRender = styled_components_1.default.div `
    margin: 0;

    max-width: 216px;
    width: 100%;
`;
const ExpressionViewRender = styled_components_1.default.div `
    background: #fcfcfe;
    border: 1px solid rgba(39, 41, 50, 0.1);
    box-sizing: border-box;
    border-radius: 2px;
    width: 100%;
    height: 82px;
    position: relative;
`;
const OtherParameters = styled_components_1.default.div `
    box-sizing: border-box;
    border-radius: 2px;
    min-height: 82px;
    width: 280px;
    position: relative;

    .VariablePicker_Content {
        z-index: 1;
        background: #fff;
    }
`;
const RuleDataPropertyEditor = ({ rule, form }) => {
    switch (rule.ruleType) {
        case FormRule_1.FormRuleType.VALIDATION:
            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VariablePicker_1.default, { selected: Reflect.get(rule.data, "controlId"), data: form.getFormDatDefinition(), onVariableSet: function (path) {
                            Reflect.set(rule.data, "controlId", path);
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        }, label: "Attach Validation To", allowNewVariable: false, inputProps: {
                            variant: "standard",
                            fullWidth: true,
                        } }), (0, jsx_runtime_1.jsxs)(WrapperWithLabel, { children: [(0, jsx_runtime_1.jsx)("label", { className: "label", children: "Validation Message" }), (0, jsx_runtime_1.jsx)(InlineTextEdit_1.InlineTextEdit, { text: Reflect.get(rule.data, "validationMessage"), fullWidth: true, variant: "caption", onEdit: (newText) => {
                                    Reflect.set(rule.data, "validationMessage", newText);
                                    StateManager_1.StateManager.propertyChanged(rule, "data");
                                }, placeholder: "Validation Message" })] })] }));
        case FormRule_1.FormRuleType.CONTROL_ENABLED:
        case FormRule_1.FormRuleType.CONTROL_VISIBILITY:
            let selectedControls = Reflect.get(rule.data, "controlId");
            if (typeof selectedControls === "string") {
                if (selectedControls !== "")
                    selectedControls = [selectedControls];
                else {
                    selectedControls = [];
                }
            }
            return ((0, jsx_runtime_1.jsxs)(WrapperWithLabel, { children: [(0, jsx_runtime_1.jsx)("label", { className: "label", children: "Control Id" }), (0, jsx_runtime_1.jsx)(CheckboxListLayer, { items: form
                            .getAllControls()
                            .map((control) => ({ label: control.toString() || "", value: control.id })), onChange: (mode, newValue) => {
                            Reflect.set(rule, "watchingValuesMode", mode);
                            Reflect.set(rule.data, "controlId", newValue);
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        }, valueMode: rule.watchingValuesMode, placeholder: "Select controls...", label: "Select controls", value: selectedControls, renderValue: (selected) => {
                            return selected
                                .map((controlId) => {
                                return form.find(controlId)?.toString();
                            })
                                .filter((v) => !!v)
                                .join(", ");
                        } })] }));
        case FormRule_1.FormRuleType.CHANGE_FOCUS:
            return ((0, jsx_runtime_1.jsxs)(core_1.FormControl, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(core_1.InputLabel, { shrink: true, children: "Control Id" }), (0, jsx_runtime_1.jsx)(UISelect_1.UISelect, { value: Reflect.get(rule.data, "controlId"), fullWidth: true, onChange: (event) => {
                            Reflect.set(rule.data, "controlId", event.target.value);
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        }, children: form
                            .getAllControls()
                            .filter((control) => control.canFocus)
                            .map((control) => ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: control.id, children: control.toString() }, control.id))) })] }));
        case FormRule_1.FormRuleType.CHANGE_VALUE:
            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VariablePicker_1.default, { selected: Reflect.get(rule.data, "dataPath"), data: form.getFormDatDefinition(), onVariableSet: (path) => {
                            Reflect.set(rule.data, "dataPath", path);
                            const field = form.getFormDatDefinition().getFieldByDataPath(path);
                            if (field) {
                                const expression = Reflect.get(rule.data, "value");
                                expression.executionResult = field;
                            }
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        }, label: "data path", inputProps: {
                            variant: "standard",
                            size: "small",
                            fullWidth: true,
                        } }), (0, jsx_runtime_1.jsxs)(ExpressionViewWithLabel, { children: [(0, jsx_runtime_1.jsx)("label", { className: "label", children: "Value" }), (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: Reflect.get(rule.data, "value"), onUpdate: () => {
                                    StateManager_1.StateManager.propertyChanged(rule, "data");
                                }, hideValidation: true, color: {
                                    result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                    expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                    variable: "rgba(39, 41, 50, 0.6)",
                                    value: "rgb(39, 41, 50)",
                                } })] })] }));
        case FormRule_1.FormRuleType.EXIT_FORM:
            return ((0, jsx_runtime_1.jsxs)(core_1.FormControl, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(core_1.InputLabel, { shrink: true, children: "Exit on Path" }), (0, jsx_runtime_1.jsx)(UISelect_1.UISelect, { value: Reflect.get(rule.data, "exitOnPath"), fullWidth: true, onChange: (event) => {
                            Reflect.set(rule.data, "exitOnPath", event.target.value);
                            StateManager_1.StateManager.propertyChanged(rule, "data");
                        }, children: form.getOutcomes().map((outcome, idx) => {
                            return ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: outcome.name, children: outcome.name }, idx));
                        }) })] }));
    }
};
exports.RuleDataPropertyEditor = RuleDataPropertyEditor;
const CheckboxListLayer = ({ items, onChange, value, renderValue, placeholder, label, valueMode, }) => {
    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
    const [mode, setMode] = (0, react_1.useState)(valueMode);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ValuesRender, { onClick: (event) => {
                    setAnchorEl(event.currentTarget);
                }, className: "CheckboxListLayer-values", children: value.length ? (renderValue ? renderValue(value) : value.join(", ")) : placeholder }), (0, jsx_runtime_1.jsx)(core_1.Menu, { open: !!anchorEl, getContentAnchorEl: null, anchorEl: anchorEl, onClose: () => {
                    setAnchorEl(null);
                }, children: (0, jsx_runtime_1.jsxs)(ValuesEditRender, { children: [(0, jsx_runtime_1.jsx)(CloseButton, { onClick: (event) => {
                                event.stopPropagation();
                                setAnchorEl(null);
                            }, children: (0, jsx_runtime_1.jsx)(CloseGrayIcon_1.CloseGrayIcon, {}) }), label && (0, jsx_runtime_1.jsx)(ValuesEditLabel, { children: label }), (0, jsx_runtime_1.jsx)(UIRadioGroup_1.default, { items: [
                                {
                                    value: "all",
                                },
                                {
                                    value: "value used in rule",
                                },
                                {
                                    value: "pick",
                                    renderUI: () => {
                                        return ((0, jsx_runtime_1.jsx)(CheckListRender, { children: items.map((item, idx) => ((0, jsx_runtime_1.jsx)(UIFormControlLabel_1.UIFormControlLabel, { label: item.label, control: (0, jsx_runtime_1.jsx)(UICheckbox_1.StyledCheckBox, { checked: value.includes(item.value || item.label), color: "primary", name: item.value || item.label, onChange: (event) => {
                                                        if (event.target.checked) {
                                                            onChange("pick", [
                                                                ...value,
                                                                item.value || item.label,
                                                            ]);
                                                        }
                                                        else {
                                                            onChange("pick", [
                                                                ...value.filter((v) => v !== (item.value || item.label)),
                                                            ]);
                                                        }
                                                    }, "data-testid": item.value || item.label }) }, idx))) }));
                                    },
                                },
                            ], value: mode, onChange: (newMode) => {
                                setMode(newMode);
                                if (newMode === "all") {
                                    onChange("all", items.map((v) => v.value || v.label));
                                }
                                else if (newMode === "value used in rule") {
                                    onChange("value used in rule", []);
                                }
                            } }), (0, jsx_runtime_1.jsx)(ActionsGroup, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", size: "small", onClick: (event) => {
                                    event.stopPropagation();
                                    setAnchorEl(null);
                                }, children: "Done" }) })] }) })] }));
};
const ValuesRender = styled_components_1.default.div `
    font-family: Source Code Pro;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(39, 41, 50, 0.6);
`;
const CheckListRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    padding-left: 15px;

    width: 200px;
    max-height: 150px;
    overflow: auto;
`;
const ValuesEditRender = styled_components_1.default.div `
    padding: 5px 15px;
`;
const ActionsGroup = styled_components_1.default.div `
    display: flex;
    justify-content: flex-end;

    margin-top: 10px;
`;
const CloseButton = styled_components_1.default.div `
    right: 0;
    top: 0;
    position: absolute;

    width: 24px;
    height: 24px;

    opacity: 0.5;

    transition: all 0.1s ease-in;

    &:hover {
        opacity: 1;
    }
`;
const ValuesEditLabel = styled_components_1.default.div `
    font-size: 14px;

    font-weight: 600;
    color: #272932;
    margin-bottom: 10px;
`;
const WrapperWithLabel = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    label.label {
        // color: #272932;
        background: #fff;

        color: rgba(0, 0, 0, 0.54);
        padding: 0;
        font-size: 10px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.00938em;
    }
`;
const ExpressionViewWithLabel = styled_components_1.default.div `
    background: #fcfcfe;
    border: 1px solid rgba(39, 41, 50, 0.1);
    box-sizing: border-box;
    border-radius: 2px;
    width: 100%;

    margin-top: 25px;

    label {
        position: absolute;
        transform: translateY(-15px);

        color: rgba(0, 0, 0, 0.54);
        padding: 0;
        font-size: 10px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.00938em;
    }
`;
//# sourceMappingURL=XFormRuleRow.js.map