import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { useState } from "react";
import { Layer } from "../../CommonUI/Components/Layer";
import { PlusGrayIcon } from "../../CommonUI/Icon/PlusGrayIcon";
import { StyledButton } from "../../CommonUI/Components/Button";
import { StyledCheckBox } from "../../CommonUI/Components/Checkbox";
import { StyledFormControlLabel } from "../../CommonUI/Components/FormControlLabel";
import { MergeIcon } from "../../CommonUI/Icon/MergeIcon";
import { DeleteGrayIcon } from "../../CommonUI/Icon/DeleteGrayIcon";
import { GridCellRender, XGridArea, XGridRow } from "./XGridContainer";
import { StyledLink } from "../../CommonUI/BuildUI/Link";
import { ArrowDownward, ArrowBack, ArrowForward, ArrowUpward } from "@material-ui/icons";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { ElementFactory } from "../../CommonUI/ElementFactory";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { PropertyEditorColor } from "../../CommonUI/PropertyEditing/PropertyEditorColor";
import { FormDesignConstants } from "../FormDesignConstants";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { ChildFullWidthDiv } from "../Controls/XCommonStyled";
export const XGridEditLayer = (props) => {
    const [grid, setGrid] = useState(props.grid);
    const [mode, setMode] = useState("modify");
    const [selected, setSelected] = useState();
    const [edit, setEdit] = 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 XGridArea(area.row, area.column, area.width, area.height);
        props.grid.addArea(newArea);
        setGrid(Object.assign(Object.assign({}, grid), { areas: props.grid.areas }));
        setMode("modify");
        setSelected(area);
    };
    const onAddNewRow = () => {
        props.grid.addRow(new XGridRow());
        setGrid(Object.assign(Object.assign({}, grid), { rows: props.grid.rows, rowsLength: props.grid.rowsLength }));
    };
    const onRowEdit = (rowIndex) => () => {
        setEdit(props.grid.rows[rowIndex]);
    };
    const onSelectArea = (area) => (event) => {
        event.stopPropagation();
        if (mode === "add")
            return;
        setSelected(Object.assign({}, 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(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, 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(Object.assign({}, temp));
        setGrid(Object.assign(Object.assign({}, 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(_jsx(EmptyGridCellRender, Object.assign({ rowStart: rowIndex, columnStart: columnIndex, selected: isSelected, onClick: onSelectArea(currentArea) }, { children: (mode === "add" || isSelected || (isSelectedBoundaryArea && containedRealArea)) && (_jsx(CheckboxRender, { children: _jsx(StyledFormControlLabel, { control: _jsx(StyledCheckBox, { checked: isSelected, color: "primary", name: `(${rowIndex}, ${columnIndex})`, onChange: mode === "modify"
                                    ? onExtendSelectedArea(currentArea)
                                    : onAddNewArea(currentArea) }, void 0), label: "" }, void 0) }, void 0)) }), `${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 XGridArea) {
        edit.onControlUpdate = () => {
            setSelected({
                row: edit.row,
                column: edit.column,
                width: edit.width,
                height: edit.height,
            });
            StateManager.changed(edit);
        };
        let editContext = edit.getFormContext();
        if (!editContext)
            return null;
        editContext.selectedId = edit.id;
        editUI = editContext.getEditUI() || null;
    }
    else if (edit instanceof XGridRow) {
        edit.onControlUpdate = () => {
            setGrid(Object.assign(Object.assign({}, grid), { rows: [...props.grid.rows] }));
            StateManager.changed(edit);
        };
        let editContext = edit.getFormContext();
        if (!editContext)
            return null;
        editContext.selectedId = edit.id;
        editUI = editContext.getEditUI() || null;
    }
    else {
        editUI = new ElementFactory(GridEditUI, {
            grid: props.grid,
            onUpdate: () => {
                setGrid(Object.assign({}, props.grid));
            },
        });
    }
    return (_jsx(Layer, { padding: "30px 0", open: true, maxWidth: false, renderUI: () => (_jsxs(XGridEditRender, { children: [_jsxs(XGridEditContent, { children: [_jsxs("div", Object.assign({ style: { overflow: "auto", flex: 1, padding: "0 30px" } }, { children: [_jsxs(ModeRender, { children: [mode === "modify" ? (_jsx(StyledButton, Object.assign({ startIcon: _jsx(PlusGrayIcon, {}, void 0), onClick: (event) => {
                                                event.stopPropagation();
                                                setMode("add");
                                                setSelected(undefined);
                                            } }, { children: "Add Area" }), void 0)) : (_jsxs("span", { children: ["click on empty cell to add area", " ", _jsx(StyledLink, Object.assign({ underline: "always", onClick: (event) => {
                                                        event.stopPropagation();
                                                        setMode("modify");
                                                    } }, { children: "Cancel" }), void 0)] }, void 0)),
                                        selected && (_jsx(StyledLink, Object.assign({ onClick: (event) => {
                                                event.stopPropagation();
                                                event.preventDefault();
                                                setEdit(props.grid);
                                            }, size: "small" }, { children: "Edit Default Config" }), void 0))] }, void 0),
                                _jsxs(GridContainer, Object.assign({ rowsTemplate: rowsTemplate, columnsLength: grid.columnsLength, gapBetweenAreas: grid.gapBetweenAreas, padding: props.grid.getInnerMargin(), background: props.grid.backgroundColor() }, { children: [emptyAreaElems, _jsx(Row, { grid: grid, onEdit: onRowEdit, actionRequired: mode === "modify" }, void 0),
                                        selected && (_jsxs(SelectedGridCell, Object.assign({ rowStart: selected.row, columnStart: selected.column, width: selected.width, height: selected.height }, { children: [_jsxs(ActionsRender, { children: [selectedOnlyReal && (_jsx(_Fragment, { children: _jsx(ActionButton, Object.assign({ onClick: onRemoveArea }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0) }, void 0)),
                                                        containedRealArea && !selectedOnlyReal && (_jsx(ActionButton, Object.assign({ onClick: onMergeArea }, { children: _jsx(MergeIcon, {}, void 0) }), void 0))] }, void 0),
                                                selectedOnlyReal && (_jsxs(_Fragment, { children: [_jsxs(SizeRender, Object.assign({ position: "top" }, { children: [((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.row) || 0) > 0 && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            row: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.row) || 1) - 1,
                                                                            height: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 0) + 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowUpward, {}, void 0) }), void 0)),
                                                                ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 0) > 1 && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            row: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.row) || 0) + 1,
                                                                            height: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 1) - 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowDownward, {}, void 0) }), void 0))] }), void 0),
                                                        _jsxs(SizeRender, Object.assign({ position: "bottom" }, { children: [((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 0) > 1 && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            height: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 0) - 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowUpward, {}, void 0) }), void 0)),
                                                                ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.row) || 0) + ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 0) <
                                                                    grid.rowsLength && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            height: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.height) || 0) + 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowDownward, {}, void 0) }), void 0))] }), void 0),
                                                        _jsxs(SizeRender, Object.assign({ position: "right" }, { children: [((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) > 1 && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) - 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowBack, {}, void 0) }), void 0)),
                                                                ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.column) || 0) +
                                                                    ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) <
                                                                    grid.columnsLength && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) + 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowForward, {}, void 0) }), void 0))] }), void 0),
                                                        _jsxs(SizeRender, Object.assign({ position: "left" }, { children: [((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.column) || 0) > 0 && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) + 1,
                                                                            column: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.column) || 0) - 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowBack, {}, void 0) }), void 0)),
                                                                ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) > 1 && (_jsx(IconButton, Object.assign({ onClick: (event) => {
                                                                        event.stopPropagation();
                                                                        onResizeArea({
                                                                            width: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.width) || 0) - 1,
                                                                            column: ((containedRealArea === null || containedRealArea === void 0 ? void 0 : containedRealArea.column) || 0) + 1,
                                                                        });
                                                                    } }, { children: _jsx(ArrowForward, {}, void 0) }), void 0))] }), void 0)] }, void 0))] }), void 0)),
                                        sortedAreas.map((area, index) => (_jsx(RealArea, { area: area, onSelectArea: onSelectArea, onClick: () => {
                                                setEdit(area);
                                                setSelected({
                                                    row: area.row,
                                                    column: area.column,
                                                    height: area.height,
                                                    width: area.width,
                                                });
                                            } }, index))),
                                        _jsx(NewRow, { grid: grid, onAdd: onAddNewRow }, void 0)] }), void 0)] }), void 0),
                        _jsx(ObserveState, { listenTo: edit || props.grid, control: () => {
                                return (_jsxs(EditUI, { children: [_jsxs(EditUITitle, { children: ["Edit ", (edit || props.grid).toString()] }, void 0),
                                        _jsx(EditUIContent, { children: _jsx(ChildFullWidthDiv, { children: editUI === null || editUI === void 0 ? void 0 : editUI.create() }, void 0) }, void 0)] }, void 0));
                            } }, void 0)] }, void 0),
                _jsx(DialogActions, { children: _jsx(StyledButton, Object.assign({ color: "primary", variant: "contained", onClick: props.updateCallback }, { children: "Done" }), void 0) }, void 0)] }, void 0)), showCloseButton: true }, void 0));
};
const RowRender = styled.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 #3e9bde;
                        border-radius: 6px;
                    }
                }
            `
    : ``}
`;
const ModeRender = styled.div `
    font-family: Inter;
    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(_jsx(RowRender, { rowStart: i, columnsLength: grid.columnsLength, enabledActions: actionRequired, onClick: onEdit(i) }, i));
    }
    return _jsx(_Fragment, { children: emptyAreaElems }, void 0);
};
const NewRow = ({ onAdd, grid }) => {
    let emptyAreaElems = [];
    // adding row for property editor
    for (let i = 0; i < grid.columnsLength; i++) {
        emptyAreaElems.push(_jsx(EmptyGridCellRender, Object.assign({ rowStart: grid.rowsLength, columnStart: i, addRowColumn: true, onClick: onAdd, firstColumn: i === 0 }, { children: i === 0 && _jsx(PlusGrayIcon, {}, void 0) }), i));
    }
    return _jsx(_Fragment, { children: emptyAreaElems }, void 0);
};
const RealArea = ({ area, onSelectArea, onClick, }) => {
    return (_jsx(GridCellRender, Object.assign({ 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: _jsx(GridCellContentRender, Object.assign({ onClick: onClick, "data-testid": `${area.row}-${area.column}-editCell` }, { children: "Click to Edit" }), void 0) }), void 0));
};
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.div `
    display: flex;
    justify-content: flex-end;
    align-items: center;

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

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

    display: flex;
    flex-direction: column;

    background-color: rgba(64, 80, 166, 0.01);
`;
const GridContainer = styled.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.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.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-family: Inter;
    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.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 #3e9bde;
    }
`;
const ActionsRender = styled.div `
    position: absolute;
    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.div `
    position: absolute;
    right: -5px;
    top: 3px;
`;
const ActionButton = styled.div `
    height: 32px;
    width: 32px;

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

    cursor: pointer;
`;
const SizeRender = styled.div `
    position: absolute;

    display: flex;

    ${(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.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.div `
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 280px;
    background: #fff;

    > * {
        margin-bottom: 10px !important;
    }
`;
const EditUITitle = styled.div `
    font-family: Inter;
    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.div `
    padding: 10px 15px;
    overflow: auto;
    flex: 1;

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