"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XGridEditContent = exports.XGridEditLayer = 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 react_1 = require("react");
const UILayer_1 = require("../../CommonUI/BuildlingBlocks/UILayer");
const PlusGrayIcon_1 = require("../../CommonUI/Icon/PlusGrayIcon");
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const UICheckbox_1 = require("../../CommonUI/BuildlingBlocks/UICheckbox");
const UIFormControlLabel_1 = require("../../CommonUI/BuildlingBlocks/UIFormControlLabel");
const XGridContainer_1 = require("./XGridContainer");
const Link_1 = require("../../CommonUI/BuilderUI/Link");
const icons_material_1 = require("@mui/icons-material");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const ElementFactory_1 = require("../../CommonUI/ElementFactory");
const PropertyEditorInteger_1 = require("../../CommonUI/PropertyEditing/PropertyEditorInteger");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const PropertyEditorColor_1 = require("../../CommonUI/PropertyEditing/PropertyEditorColor");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const PropertyEditorSelect_1 = require("../../CommonUI/PropertyEditing/PropertyEditorSelect");
const CommonStyled_1 = require("../Controls/Web/CommonStyled");
const core_1 = require("@material-ui/core");
const ValidationInformation_1 = require("../../Rule/DesignUI/ValidationInformation");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const XGridEditLayer = (props) => {
    const [grid, setGrid] = (0, react_1.useState)(props.grid);
    const [selected, setSelected] = (0, react_1.useState)();
    const [edit, setEdit] = (0, react_1.useState)(null);
    let containedRealArea = selected
        ? grid.areas.find((area) => {
            return isContained(area, selected);
        })
        : null;
    let selectedOnlyReal = containedRealArea && selected && compareArea(containedRealArea, selected);
    const onAddNewArea = (area) => () => {
        let newArea = new XGridContainer_1.XGridArea(area.row, area.column, area.width, area.height);
        props.grid.addArea(newArea);
        setGrid({
            ...grid,
            areas: props.grid.areas,
        });
        setSelected(area);
    };
    const onAddNewRow = () => {
        props.grid.addRow(new XGridContainer_1.XGridRow());
        setGrid({
            ...grid,
            rows: props.grid.rows,
            rowsLength: props.grid.rowsLength,
        });
    };
    const onRowEdit = (rowIndex) => () => {
        setEdit(props.grid.rows[rowIndex]);
    };
    const onSelectArea = (area) => (event) => {
        event.stopPropagation();
        setSelected({ ...area });
    };
    const onMergeArea = () => {
        if (!containedRealArea || !selected)
            return;
        props.grid.areas = grid.areas.map((area) => {
            if (compareArea(area, containedRealArea)) {
                area.height = selected.height;
                area.width = selected.width;
                area.row = selected.row;
                area.column = selected.column;
                setEdit(area);
            }
            return area;
        });
        setGrid({
            ...grid,
            areas: props.grid.areas,
        });
    };
    const onExtendSelectedArea = (area) => () => {
        if (!selected)
            return;
        // adding boundary area
        if (isContained(area, {
            row: selected.row - 1,
            column: selected.column - 1,
            height: selected.height + 2,
            width: selected.width + 2,
        })) {
            setSelected({
                row: Math.min(area.row, selected.row),
                column: Math.min(area.column, selected.column),
                height: Math.max(selected.row + selected.height, area.row + area.height) - Math.min(area.row, selected.row),
                width: Math.max(selected.column + selected.width, area.column + area.width) -
                    Math.min(area.column, selected.column),
            });
        }
    };
    const onRemoveArea = (event) => {
        event.stopPropagation();
        if (!containedRealArea || !selected)
            return;
        props.grid.removeArea(containedRealArea);
        setGrid({
            ...grid,
            areas: props.grid.areas,
        });
        setSelected(undefined);
    };
    const isSelectedArea = (area) => {
        if (!selected)
            return;
        return selected && isContained(area, selected);
    };
    const onResizeArea = (size) => {
        let area = props.grid.areas.find((a) => a.id === Reflect.get(containedRealArea, "id"));
        if (!area) {
            return;
        }
        let temp = selected;
        if (size.row !== undefined) {
            area.row = size.row;
            temp.row = size.row;
        }
        if (size.column !== undefined) {
            area.column = size.column;
            temp.column = size.column;
        }
        if (size.height !== undefined) {
            area.height = size.height;
            temp.height = size.height;
        }
        if (size.width !== undefined) {
            area.width = size.width;
            temp.width = size.width;
        }
        setSelected({
            ...temp,
        });
        setGrid({
            ...grid,
            areas: props.grid.areas,
        });
    };
    let emptyAreaElems = [];
    let rowIndex = 0;
    let columnIndex = 0;
    let sortedAreas = grid.areas;
    while (rowIndex < grid.rowsLength) {
        while (columnIndex < grid.columnsLength) {
            // eslint-disable-next-line
            let temp = sortedAreas.findIndex(function (area) {
                return area.row <= rowIndex && area.row + area.height > rowIndex && area.column === columnIndex;
            });
            if (temp >= 0) {
                columnIndex = columnIndex + sortedAreas[temp].width;
                if (columnIndex >= grid.columnsLength) {
                    columnIndex = 0;
                    rowIndex += 1;
                    break;
                }
            }
            else {
                const isSelected = isSelectedArea({
                    row: rowIndex,
                    column: columnIndex,
                    height: 1,
                    width: 1,
                });
                const isSelectedBoundaryArea = selected &&
                    isContained({ row: rowIndex, column: columnIndex, width: 1, height: 1 }, {
                        row: selected.row - 1,
                        column: selected.column - 1,
                        width: selected.width + 2,
                        height: selected.height + 2,
                    });
                const currentArea = {
                    row: rowIndex,
                    column: columnIndex,
                    height: 1,
                    width: 1,
                };
                emptyAreaElems.push((0, jsx_runtime_1.jsx)(EmptyGridCellRender, { rowStart: rowIndex, columnStart: columnIndex, selected: isSelected, onClick: onSelectArea(currentArea), children: (isSelected || (isSelectedBoundaryArea && containedRealArea)) && ((0, jsx_runtime_1.jsx)(CheckboxRender, { children: (0, jsx_runtime_1.jsx)(UIFormControlLabel_1.UIFormControlLabel, { control: (0, jsx_runtime_1.jsx)(UICheckbox_1.StyledCheckBox, { checked: isSelected, color: "primary", name: `(${rowIndex}, ${columnIndex})`, onChange: onExtendSelectedArea(currentArea) }), label: "" }) })) }, `${rowIndex}-${columnIndex}`));
                columnIndex++;
                if (grid.columnsLength === columnIndex) {
                    columnIndex = 0;
                    rowIndex += 1;
                    break;
                }
            }
        }
    }
    const rowsTemplate = grid.rows
        .map((row) => (row.height ? `${row.height}px` : `minmax(75px, max-content)`))
        .join(" ");
    let editUI;
    if (edit instanceof XGridContainer_1.XGridArea) {
        edit.onControlUpdate = () => {
            setSelected({
                row: edit.row,
                column: edit.column,
                width: edit.width,
                height: edit.height,
            });
            StateManager_1.StateManager.changed(edit);
        };
        let editContext = edit.getFormContext();
        if (!editContext)
            return null;
        editContext.selectedId = edit.id;
        editUI = editContext.getEditUI() || null;
    }
    else if (edit instanceof XGridContainer_1.XGridRow) {
        edit.onControlUpdate = () => {
            setGrid({
                ...grid,
                rows: [...props.grid.rows],
            });
            StateManager_1.StateManager.changed(edit);
        };
        let editContext = edit.getFormContext();
        if (!editContext)
            return null;
        editContext.selectedId = edit.id;
        editUI = editContext.getEditUI() || null;
    }
    else {
        editUI = new ElementFactory_1.ElementFactory(GridEditUI, {
            grid: props.grid,
            onUpdate: () => {
                setGrid({ ...props.grid });
            },
        });
    }
    return ((0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { padding: "30px 0", open: true, maxWidth: false, renderUI: () => ((0, jsx_runtime_1.jsxs)(XGridEditRender, { children: [(0, jsx_runtime_1.jsx)(EditUITitle, { children: "Edit Grid Container" }), (0, jsx_runtime_1.jsxs)(exports.XGridEditContent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { overflow: "auto", flex: 1, padding: "0 30px" }, children: [(0, jsx_runtime_1.jsxs)(ModeRender, { children: [(0, jsx_runtime_1.jsx)("span", { children: "select cell to add area " }), selected && ((0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: (event) => {
                                                event.stopPropagation();
                                                event.preventDefault();
                                                setEdit(props.grid);
                                            }, size: "small", children: "Edit Default Config" }))] }), (0, jsx_runtime_1.jsxs)(GridContainer, { rowsTemplate: rowsTemplate, columnsLength: grid.columnsLength, gapBetweenAreas: grid.gapBetweenAreas, padding: props.grid.getInnerMargin(), background: props.grid.backgroundColor(), children: [(0, jsx_runtime_1.jsx)(Row, { grid: grid, onEdit: onRowEdit, actionRequired: true }), emptyAreaElems, selected && ((0, jsx_runtime_1.jsxs)(SelectedGridCell, { rowStart: selected.row, columnStart: selected.column, width: selected.width, height: selected.height, children: [(0, jsx_runtime_1.jsx)(ActionsRender, { position: "bottom", children: selectedOnlyReal ? ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: onRemoveArea, size: "small", children: "delete" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: () => {
                                                                    setSelected(undefined);
                                                                }, size: "small", children: "Cancel" }), containedRealArea ? ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: onMergeArea, size: "small", children: "merge" })) : ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: onAddNewArea({
                                                                    row: selected.row,
                                                                    column: selected.column,
                                                                    width: selected.width,
                                                                    height: selected.height,
                                                                }), size: "small", children: "Add" }))] })) }), selectedOnlyReal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SizeRender, { position: "top", className: "SizeRender", children: [(containedRealArea?.row || 0) > 0 && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            row: (containedRealArea?.row || 1) - 1,
                                                                            height: (containedRealArea?.height || 0) + 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowUpward, {}) })), (containedRealArea?.height || 0) > 1 && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            row: (containedRealArea?.row || 0) + 1,
                                                                            height: (containedRealArea?.height || 1) - 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDownward, {}) }))] }), (0, jsx_runtime_1.jsxs)(SizeRender, { position: "bottom", children: [(containedRealArea?.height || 0) > 1 && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            height: (containedRealArea?.height || 0) - 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowUpward, {}) })), (containedRealArea?.row || 0) + (containedRealArea?.height || 0) <
                                                                    grid.rowsLength && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            height: (containedRealArea?.height || 0) + 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDownward, {}) }))] }), (0, jsx_runtime_1.jsxs)(SizeRender, { position: "right", children: [(containedRealArea?.width || 0) > 1 && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: (containedRealArea?.width || 0) - 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) })), (containedRealArea?.column || 0) +
                                                                    (containedRealArea?.width || 0) <
                                                                    grid.columnsLength && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: (containedRealArea?.width || 0) + 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, {}) }))] }), (0, jsx_runtime_1.jsxs)(SizeRender, { position: "left", children: [(containedRealArea?.column || 0) > 0 && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: (containedRealArea?.width || 0) + 1,
                                                                            column: (containedRealArea?.column || 0) - 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) })), (containedRealArea?.width || 0) > 1 && ((0, jsx_runtime_1.jsx)(IconButton, { onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: (containedRealArea?.width || 0) - 1,
                                                                            column: (containedRealArea?.column || 0) + 1,
                                                                        });
                                                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, {}) }))] })] }))] })), sortedAreas.map((area, index) => ((0, jsx_runtime_1.jsx)(RealArea, { area: area, onSelectArea: onSelectArea, onClick: () => {
                                                setEdit(area);
                                                setSelected({
                                                    row: area.row,
                                                    column: area.column,
                                                    height: area.height,
                                                    width: area.width,
                                                });
                                            } }, index))), (0, jsx_runtime_1.jsx)(NewRow, { grid: grid, onAdd: onAddNewRow })] })] }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: edit || props.grid, control: () => {
                                return ((0, jsx_runtime_1.jsxs)(EditUI, { children: [(0, jsx_runtime_1.jsxs)(EditUITitle, { children: ["Edit ", (edit || props.grid).toString()] }), (0, jsx_runtime_1.jsx)(EditUIContent, { children: (0, jsx_runtime_1.jsx)(CommonStyled_1.ChildFullWidthDiv, { children: editUI?.create() }) })] }));
                            } })] }), (0, jsx_runtime_1.jsxs)(core_1.Box, { display: "flex", justifyContent: "space-between", padding: "0 15px", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(ValidationInformation_1.ValidationInformation, { provider: props.grid }) }), (0, jsx_runtime_1.jsx)(DialogActions, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: props.updateCallback, children: "Done" }) })] })] })), showCloseButton: true, onClose: () => props.updateCallback() }));
};
exports.XGridEditLayer = XGridEditLayer;
const RowRender = styled_components_1.default.div `
    grid-column-start: 1;
    grid-column-end: ${(props) => props.columnsLength + 1};

    grid-row-start: ${(props) => props.rowStart + 1};
    grid-row-end: ${(props) => props.rowStart + 2};

    position: relative;

    ${(props) => props.enabledActions
    ? `
                &:hover {

                    &::before {
                        content: "";
                        position: absolute;
                        top: -4px;
                        right: -4px;
                        left: -4px;
                        bottom: -4px;
                        border: 2px solid ${UIStyleConstants_1.UIStyleConstants.BLUE_GRAY_COLOR};
                        border-radius: 6px;
                    }
                }
            `
    : ``}
`;
const ModeRender = styled_components_1.default.div `
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    > span {
        margin-right: 10px;
    }
`;
const Row = ({ onEdit, grid, actionRequired, }) => {
    let emptyAreaElems = [];
    //  adding add new row columns;
    for (let i = 0; i < grid.rowsLength; i++) {
        emptyAreaElems.push((0, jsx_runtime_1.jsx)(RowRender, { rowStart: i, columnsLength: grid.columnsLength, enabledActions: actionRequired, onClick: onEdit(i) }, i));
    }
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyAreaElems });
};
const NewRow = ({ onAdd, grid }) => {
    let emptyAreaElems = [];
    // adding row for property editor
    for (let i = 0; i < grid.columnsLength; i++) {
        emptyAreaElems.push((0, jsx_runtime_1.jsx)(EmptyGridCellRender, { rowStart: grid.rowsLength, columnStart: i, addRowColumn: true, onClick: onAdd, firstColumn: i === 0, children: i === 0 && (0, jsx_runtime_1.jsx)(PlusGrayIcon_1.PlusGrayIcon, {}) }, i));
    }
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyAreaElems });
};
const RealArea = ({ area, onSelectArea, onClick, }) => {
    return ((0, jsx_runtime_1.jsx)(XGridContainer_1.GridCellRender, { rowStart: area.row, columnStart: area.column, columnSpan: area.width, rowSpan: area.height, onClick: onSelectArea(area), backgroundColor: area.backgroundColor(), borderColor: area.borderColor(), borderStyle: area.borderStyle(), borderWidth: area.borderWidth(), borderRadius: area.borderRadius(), padding: area.getInnerMargin(), "data-testid": `XGridContainerEdit-${area.row}-${area.column}`, children: (0, jsx_runtime_1.jsx)(GridCellContentRender, { onClick: onClick, "data-testid": `${area.row}-${area.column}-editCell`, children: "Click to Edit" }) }));
};
const compareArea = (area1, area2) => {
    let area1Id = Reflect.get(area1, "id");
    let area2Id = Reflect.get(area2, "id");
    if (area1Id && area2Id) {
        return area1Id === area2Id;
    }
    return (area1.row === area2.row &&
        area1.column === area2.column &&
        area1.height === area2.height &&
        area1.width === area2.width);
};
const isContained = (area, included) => {
    return (area.row >= included.row &&
        area.row + area.height <= included.row + included.height &&
        area.column >= included.column &&
        area.column + area.width <= included.column + included.width);
};
const DialogActions = styled_components_1.default.div `
    display: flex;
    justify-content: flex-end;
    align-items: center;

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

        &:first-child {
            margin-left: 0 !important;
        }
    }
`;
const XGridEditRender = styled_components_1.default.div `
    height: 80vh;
    width: 80vw;

    display: flex;
    flex-direction: column;

    background-color: rgba(64, 80, 166, 0.01);
`;
const GridContainer = styled_components_1.default.div `
    display: grid;

    position: relative;

    grid-template-columns: repeat(${(props) => props.columnsLength}, 1fr);
    grid-template-rows: ${(props) => props.rowsTemplate};

    column-gap: ${(props) => props.gapBetweenAreas}px;
    row-gap: ${(props) => props.gapBetweenAreas}px;

    ${(props) => (props.padding !== undefined ? `padding: ${props.padding}px;` : ``)}

    ${(props) => (props.background ? `background: ${props.background};` : ``)}

  width: 800px;
`;
const EmptyGridCellRender = styled_components_1.default.div `
    display: flex;
    align-items: center;
    justify-content: center;

    grid-column: ${(props) => props.columnStart + 1} / span 1;
    grid-row: ${(props) => props.rowStart + 1} / span 1;

    position: relative;
    border-radius: 4px;

    ${(props) => props.addRowColumn
    ? `
                height: 60px;
            `
    : `
                height: 100%;
                min-height: 75px;
            `};

    ${(props) => props.addRowColumn || props.selected
    ? `
                        background-color: rgba(64, 80, 166, ${props.firstColumn ? "0.1" : "0.05"}); 
                    `
    : `
                        border: 1px dashed rgba(39, 41, 50, 0.6); 
                    `};

    ${(props) => props.selected
    ? `
                &::after {
                    content: "";
                    border-radius: 8px;
                    position: absolute;
                    top: 4px;
                    bottom: 4px;
                    right: 4px;
                    left: 4px;
                    border: 1px dashed rgba(39, 41, 50, 0.6); 
                }
            `
    : ``}
`;
const GridCellContentRender = styled_components_1.default.div `
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    height: 100%;

    border: 1px dashed rgba(39, 41, 50, 0.4);
    border-radius: 4px;

    //styleName: text/Inter Medium 11px;

    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: center;

    color: rgba(39, 41, 50, 0.4);
`;
const SelectedGridCell = styled_components_1.default.div `
    grid-column-start: ${(props) => props.columnStart + 1};
    grid-column-end: ${(props) => props.columnStart + 1 + props.width};

    grid-row-start: ${(props) => props.rowStart + 1};
    grid-row-end: ${(props) => props.rowStart + 1 + props.height};

    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: -4px;
        right: -4px;

        border-radius: 6px;
        border: 2px solid ${UIStyleConstants_1.UIStyleConstants.BLUE_GRAY_COLOR};
    }
`;
const ActionsRender = styled_components_1.default.div `
    position: absolute;

    align-items: center;
    z-index: 2;

    ${(props) => props.position === "bottom"
    ? `
                top: calc(100% + 10px);
                right: 0px;
                padding: 5px;

                & > * {
                    margin-left: 5px !important;

                    &:first-child {
                        margin-left: 0;
                    }
                }
            `
    : `
                bottom: 100%;
                right: 4px;
            `}

    border-radius: 4px;
    background: #fff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    border-radius: 4px;

    display: flex;
`;
const CheckboxRender = styled_components_1.default.div `
    position: absolute;
    right: -5px;
    top: 3px;
`;
const SizeRender = styled_components_1.default.div `
    position: absolute;

    display: flex;

    z-index: 2;

    ${(props) => props.position === "top"
    ? `top: 5px;left: 50%; transform: translateX(-50%); flex-direction: row;`
    : props.position === "bottom"
        ? `bottom: 5px;left: 50%; transform: translateX(-50%); flex-direction: row;`
        : props.position === "right"
            ? `top: 50%;right: 5px; transform: translateY(-50%); flex-direction: column;`
            : `top: 50%;left: 5px; transform: translateY(-50%);  flex-direction: column;`}
`;
const IconButton = styled_components_1.default.div `
    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    opacity: 0.7;

    &:hover {
        opacity: 1;
    }

    .MuiSvgIcon-root {
        width: 12px;
        height: 12px;
    }
`;
const EditUI = styled_components_1.default.div `
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 280px;
    background: #fff;

    > * {
        margin-bottom: 10px !important;
    }
`;
const EditUITitle = styled_components_1.default.div `
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 0;

    .close {
        background: rgba(39, 41, 50, 0.05);
    }
`;
const EditUIContent = styled_components_1.default.div `
    padding: 10px 15px;
    overflow: auto;
    flex: 1;

    > * {
        margin-bottom: 15px !important;
    }
`;
const GridEditUI = (props) => {
    const updateControl = () => {
        props.onUpdate();
        StateManager_1.StateManager.changed(props.grid);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: props.grid, propertyName: "containerBackgroundColor", label: "Container Background Color", updateCallback: () => {
                    props.onUpdate();
                    StateManager_1.StateManager.propertyChanged(props.grid, "containerBackgroundColor");
                } }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: props.grid, propertyName: "gapBetweenAreas", label: "Gap Between Areas", updateCallback: () => {
                    props.onUpdate();
                    StateManager_1.StateManager.propertyChanged(props.grid, "gapBetweenAreas");
                } }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: props.grid, propertyName: "innerMargin", label: "Inner Margin", updateCallback: () => {
                    props.onUpdate();
                    StateManager_1.StateManager.propertyChanged(props.grid, "innerMargin");
                } }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: props.grid, propertyName: "defaultAreaBackgroundColor", label: "Default Area Background Color", updateCallback: () => {
                    props.onUpdate();
                    StateManager_1.StateManager.propertyChanged(props.grid, "defaultAreaBackgroundColor");
                } }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: props.grid, label: "Default Area Border Width", propertyName: "defaultAreaBorderWidth", updateCallback: updateControl }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: props.grid, label: "Default Area Border Radius", propertyName: "defaultAreaBorderRadius", updateCallback: updateControl }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: props.grid, label: "Default Area Border Color", propertyName: "defaultAreaBorderColor", updateCallback: updateControl }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: props.grid, label: "Default Area Border Style", propertyName: "defaultAreaBorderStyle", updateCallback: updateControl, options: FormDesignConstants_1.FormDesignConstants.BORDER_STYLES }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: props.grid, label: "Default Area Inner Margin", propertyName: "defaultAreaInnerMargin", updateCallback: updateControl })] }));
};
exports.XGridEditContent = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: auto;
`;
//# sourceMappingURL=XGridEditLayer.js.map