import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { TableContainer, TableHead, TableCell, Table, TableRow, TableBody, TableSortLabel, Button, Box } from "@material-ui/core";
import { Droppable, DragDropContext } from 'react-beautiful-dnd';
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { FormRule } from "../FormRule";
// import { XFormRuleEditDialog } from "./XFormRuleEditDialog";
import { XExpressionDefinition } from "../../Expressions/XExpressionDefinition";
import { XFormRuleRow } from "./XFormRuleRow";
export const XFormRulePage = ({ form }) => {
    const onClickAddRule = () => {
        let rules = form.rules;
        let newRule = new FormRule(new XExpressionDefinition());
        rules.push(newRule);
        form.rules = rules;
        StateManager.propertyChanged(form, "rules");
    };
    const onClickRemoveButton = (index) => {
        let rules = form.rules;
        rules.splice(index, 1);
        form.rules = rules;
        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.propertyChanged(form, "rules");
    };
    return (_jsx(FormRulePageRender, Object.assign({ className: "XFormRulePage-root", "data-testid": "XFormRulePage-root" }, { children: _jsx(ObserveState, { listenTo: form, properties: ["rules"], control: () => (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ display: "flex", justifyContent: "flex-end", mb: 2 }, { children: _jsx(Button, Object.assign({ color: "primary", size: "small", variant: "contained", className: "XFormAddRule-root", onClick: onClickAddRule }, { children: "Add Rule" }), void 0) }), void 0),
                    _jsx(StyledTableContainer, Object.assign({ className: "XFormRulePage-table", "data-testid": "XFormRulePage-table" }, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(TableSortLabel, Object.assign({ active: true, direction: "asc" }, { children: "Rule Type" }), void 0) }, void 0),
                                            _jsx(TableCell, Object.assign({ style: { width: "150px" } }, { children: _jsx(TableSortLabel, Object.assign({ active: false, direction: "asc" }, { children: "Run at form show" }), void 0) }), void 0),
                                            _jsx(TableCell, Object.assign({ style: { width: "360px" } }, { children: _jsx("span", { children: "Expression" }, void 0) }), void 0),
                                            _jsx(TableCell, { children: _jsx("span", { children: "Other Parameters" }, void 0) }, void 0),
                                            _jsx(TableCell, { style: { width: "56px" } }, void 0)] }, void 0) }, void 0),
                                form.rules.length > 0 && (_jsx(DragDropContext, Object.assign({ onDragEnd: onDragendRow }, { children: _jsx(Droppable, Object.assign({ droppableId: "ruleRowDrop" }, { children: (provided) => (_jsx(TableBody, Object.assign({}, provided.droppableProps, { ref: provided.innerRef }, { children: form.rules.map((rule, idx) => (_jsx(XFormRuleRow, { form: form, rule: rule, index: idx, onAction: () => onClickRemoveButton(idx) }, idx))) }), void 0)) }), void 0) }), void 0)),
                                form.rules.length === 0 && (_jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}, void 0),
                                            _jsx(TableCell, Object.assign({ colSpan: 4 }, { children: "You have no rules." }), void 0)] }, void 0) }, void 0))] }, void 0) }), void 0)] }, void 0)) }, void 0) }), void 0));
};
const FormRulePageRender = styled.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 = styled(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-family: Inter;
            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