"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XFormRulePage = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const FormRule_1 = require("../Structure/FormRule");
// import { XFormRuleEditDialog } from "./XFormRuleEditDialog";
const ExpressionConfiguration_1 = require("@appglue/common/dist/Expressions/ExpressionConfiguration");
const XFormRuleRow_1 = require("./XFormRuleRow");
const XFormRulePage = ({ form }) => {
    const onClickAddRule = () => {
        let rules = form.rules;
        let newRule = new FormRule_1.FormRule(new ExpressionConfiguration_1.ExpressionConfiguration());
        rules.push(newRule);
        form.rules = rules;
        StateManager_1.StateManager.propertyChanged(form, "rules");
    };
    const onClickRemoveButton = (index) => {
        let rules = form.rules;
        rules.splice(index, 1);
        form.rules = rules;
        StateManager_1.StateManager.propertyChanged(form, "rules");
    };
    const onDragendRow = (result) => {
        if (!result.destination) {
            return;
        }
        const [removed] = form.rules.splice(result.source.index, 1);
        form.rules.splice(result.destination.index, 0, removed);
        StateManager_1.StateManager.propertyChanged(form, "rules");
    };
    return ((0, jsx_runtime_1.jsx)(FormRulePageRender, { className: "XFormRulePage-root", "data-testid": "XFormRulePage-root", children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: form, properties: ["rules"], control: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.Box, { display: "flex", justifyContent: "flex-end", mb: 2, children: (0, jsx_runtime_1.jsx)(core_1.Button, { color: "primary", size: "small", variant: "contained", className: "XFormAddRule-root", onClick: onClickAddRule, children: "Add Rule" }) }), (0, jsx_runtime_1.jsx)(StyledTableContainer, { className: "XFormRulePage-table", "data-testid": "XFormRulePage-table", children: (0, jsx_runtime_1.jsxs)(core_1.Table, { children: [(0, jsx_runtime_1.jsx)(core_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(core_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(core_1.TableSortLabel, { active: true, direction: "asc", children: "Rule Type" }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { style: { width: "150px" }, children: (0, jsx_runtime_1.jsx)(core_1.TableSortLabel, { active: false, direction: "asc", children: "Run at form show" }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { style: { width: "360px" }, children: (0, jsx_runtime_1.jsx)("span", { children: "Expression" }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)("span", { children: "Other Parameters" }) }), (0, jsx_runtime_1.jsx)(core_1.TableCell, { style: { width: "56px" } })] }) }), form.rules.length > 0 && ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: onDragendRow, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: "ruleRowDrop", children: (provided) => ((0, jsx_runtime_1.jsx)(core_1.TableBody, { ...provided.droppableProps, ref: provided.innerRef, children: form.rules.map((rule, idx) => ((0, jsx_runtime_1.jsx)(XFormRuleRow_1.XFormRuleRow, { form: form, rule: rule, index: idx, onAction: () => onClickRemoveButton(idx) }, idx))) })) }) })), form.rules.length === 0 && ((0, jsx_runtime_1.jsx)(core_1.TableBody, { children: (0, jsx_runtime_1.jsxs)(core_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(core_1.TableCell, {}), (0, jsx_runtime_1.jsx)(core_1.TableCell, { colSpan: 4, children: "You have no rules." })] }) }))] }) })] })) }) }));
};
exports.XFormRulePage = XFormRulePage;
const FormRulePageRender = styled_components_1.default.div `
    height: 100%;
    width: 100%;

    position: relative;

    background: rgba(64, 80, 166, 0.04);

    padding-top: 24px;
    padding-left: 16px;
    padding-right: 16px;
`;
const StyledTableContainer = (0, styled_components_1.default)(core_1.TableContainer) `
    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: visible;

    .MuiTableCell-body {
        padding: 8px 0;
    }

    .MuiTableCell-head {
        padding: 12px 0;

        &,
        & .MuiTableSortLabel-root {
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 17px;
            letter-spacing: 0px;
            text-align: left;
            color: rgba(39, 41, 50, 0.3);
        }

        span {
            display: flex;
            width: 100%;
            padding: 3px 16px;
            border-left: solid 1px rgba(39, 41, 50, 0.2);
        }

        &:first-child {
            span {
                border: none;
            }
        }
    }
`;
//# sourceMappingURL=XFormRulePage.js.map