"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XDataDefOrObjectDefLayer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const Link_1 = require("../BuilderUI/Link");
const StyledButton_1 = require("../BuildlingBlocks/StyledButton");
const UILayer_1 = require("../BuildlingBlocks/UILayer");
const Object_1 = require("./Object");
const XDataDefOrObjectDefLayer = ({ open, data, renderTitle, updateCallback, value, clearButtonTitle, doneButtonTitle, }) => {
    const [objValues, setValues] = (0, react_1.useState)(value);
    (0, react_1.useEffect)(() => {
        setValues(value);
    }, [value]);
    let field = new ObjectDataDefinition_1.ObjectDataDefinition();
    if (data instanceof ObjectDataDefinition_1.ObjectDataDefinition) {
        field = data;
    }
    else {
        field.fields = data.fields;
    }
    const onValueUpdate = (newValue) => {
        setValues(newValue);
    };
    const onClear = () => {
        if (field.list) {
            setValues([]);
        }
        else {
            setValues({});
        }
    };
    const onDone = () => {
        updateCallback(objValues);
    };
    return ((0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: open, maxWidth: false, padding: "16px 20px", renderUI: () => ((0, jsx_runtime_1.jsxs)(LayerRender, { children: [renderTitle ? renderTitle() : null, (0, jsx_runtime_1.jsx)(Object_1.EditModeObjectValueEditor, { forData: field, value: objValues, editMode: "inline", onUpdate: onValueUpdate }), (0, jsx_runtime_1.jsxs)(ButtonGroupRender, { children: [(0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: onClear, children: clearButtonTitle || "Clear" }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: onDone, "data-testid": (doneButtonTitle || "Done").toLocaleLowerCase(), children: doneButtonTitle || "Done" })] })] })) }));
};
exports.XDataDefOrObjectDefLayer = XDataDefOrObjectDefLayer;
const LayerRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .ValueEditor-display {
        flex: 1;
        overflow: auto;
    }
`;
const ButtonGroupRender = styled_components_1.default.div `
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 15px 0 10px;

    & > *:first-child {
        margin-right: 10px;
    }
`;
//# sourceMappingURL=XDataDefOrObjectDefLayer.js.map