"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataDefEditLayer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataDefinition_1 = require("@appglue/common/dist/Common/Data/DataDefinition");
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const UILayer_1 = require("../BuildlingBlocks/UILayer");
const PropertyEditorBoolean_1 = require("../PropertyEditing/PropertyEditorBoolean");
const PropertyEditorDate_1 = require("../PropertyEditing/PropertyEditorDate");
const PropertyEditorInteger_1 = require("../PropertyEditing/PropertyEditorInteger");
const PropertyEditorText_1 = require("../PropertyEditing/PropertyEditorText");
const PropertyEditorTextList_1 = require("../PropertyEditing/PropertyEditorTextList");
const DataBuilder_1 = require("../../DataBuilder/DataBuilder");
const UISwitch_1 = require("../BuildlingBlocks/UISwitch");
const material_1 = require("@mui/material");
const UILabel_1 = require("../BuildlingBlocks/UILabel");
const UIButton_1 = require("../BuildlingBlocks/UIButton");
const DataDefEditLayer = ({ dataDef, onUpdate, onClose, ...extra }) => {
    const updateCallback = () => {
        onUpdate();
    };
    let content = null;
    let newDef = new DataDefinition_1.DataDefinition();
    switch (dataDef.type) {
        case DataTypes_1.DataTypes.STRING:
            content = ((0, jsx_runtime_1.jsx)(StringDataDefEditProperties, { dataDef: dataDef, updateCallback: updateCallback }));
            break;
        case DataTypes_1.DataTypes.DATE:
            content = ((0, jsx_runtime_1.jsx)(DateDataDefEditProperties, { dataDef: dataDef, updateCallback: updateCallback }));
            break;
        case DataTypes_1.DataTypes.NUMBER:
            content = ((0, jsx_runtime_1.jsx)(NumberDataDefEditProperties, { dataDef: dataDef, updateCallback: updateCallback }));
            break;
        case DataTypes_1.DataTypes.FILE:
            return null;
        case DataTypes_1.DataTypes.OBJECT:
            newDef.fields = Reflect.get(dataDef, "fields");
            content = (0, jsx_runtime_1.jsx)(DataBuilder_1.DataBuilder, { definition: newDef });
            break;
        default:
            content = (0, jsx_runtime_1.jsx)("div", { children: "Select type" });
    }
    if (dataDef.type === DataTypes_1.DataTypes.OBJECT) {
        return ((0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { maxWidth: false, open: extra.open, onClose: onClose, showCloseButton: true, renderUI: () => {
                return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "column", padding: "20px", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { paddingBottom: "20px", display: "flex", flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { type: "page_heading", children: "Edit Data Definition" }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: (event) => {
                                        event.stopPropagation();
                                        Reflect.set(dataDef, "fields", newDef.fields);
                                        onUpdate();
                                        onClose();
                                    }, color: "primary", variant: "contained", children: "Save" })] }), content] }));
            } }));
    }
    return ((0, jsx_runtime_1.jsx)(core_1.Menu, { onClose: onClose, ...extra, children: (0, jsx_runtime_1.jsxs)(DataDefEditLayerRender, { children: [(0, jsx_runtime_1.jsxs)(UILabel_1.UILabel, { type: "section_title", children: ["Edit ", dataDef.type, " Settings"] }), content, (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "end", children: (0, jsx_runtime_1.jsx)(UIButton_1.UIButton, { onClick: () => {
                            onUpdate();
                            onClose();
                        }, children: "Save" }) })] }) }));
};
exports.DataDefEditLayer = DataDefEditLayer;
const DataDefEditLayerRender = styled_components_1.default.div `
    display: flex;
    background: #fff;
    z-index: 2;
    width: 300px;
    flex-direction: column;
    padding: 8px 20px;
`;
const StringDataDefEditProperties = ({ dataDef, updateCallback }) => {
    const [validValues, setValidValues] = (0, react_1.useState)(dataDef.validValues);
    const [pattern, setPattern] = (0, react_1.useState)(dataDef.pattern);
    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { paddingTop: "15px", display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { children: "Specify Valid Values" }), (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: validValues.length > 0, trueDisplay: "Yes", falseDisplay: "No", onSet: (newValue) => {
                            if (newValue) {
                                dataDef.validValues.push("");
                            }
                            else {
                                dataDef.validValues = [];
                            }
                            setValidValues([...dataDef.validValues]);
                            updateCallback();
                        } })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "10px" }), (0, jsx_runtime_1.jsxs)(core_1.Collapse, { in: validValues.length > 0, children: [(0, jsx_runtime_1.jsx)(PropertyEditorTextList_1.PropertyEditorTextList, { editObject: dataDef, propertyName: "validValues", label: "Valid Values", updateCallback: () => {
                            setValidValues(dataDef.validValues);
                            updateCallback();
                        } }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "10px" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { children: "Specify Pattern" }), (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: pattern !== undefined, trueDisplay: "Yes", falseDisplay: "No", onSet: (newValue) => {
                            if (newValue) {
                                dataDef.pattern = "";
                            }
                            else {
                                dataDef.pattern = undefined;
                            }
                            setPattern(dataDef.pattern);
                            updateCallback();
                        } })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "10px" }), (0, jsx_runtime_1.jsxs)(core_1.Collapse, { in: pattern !== undefined, children: [(0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: dataDef, propertyName: "pattern", updateCallback: () => {
                            setPattern(dataDef.pattern);
                            updateCallback();
                        }, label: "Pattern", hint: "specify regular expression" }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "10px" })] })] }));
};
const DateDataDefEditProperties = ({ dataDef, updateCallback }) => {
    const [storeTime, setStoreTime] = (0, react_1.useState)(dataDef.storeTime);
    // eslint-disable-next-line
    const [_, setLowerBounds] = (0, react_1.useState)(dataDef.lowerBounds);
    // eslint-disable-next-line
    const [__, setUpperBounds] = (0, react_1.useState)(dataDef.upperBounds);
    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "column", paddingTop: "15px", children: [(0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Store Time", editObject: dataDef, propertyName: "storeTime", updateCallback: () => {
                    setStoreTime(dataDef.storeTime);
                    updateCallback();
                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "15px" }), (0, jsx_runtime_1.jsx)(PropertyEditorDate_1.PropertyEditorDate, { editObject: dataDef, propertyName: "lowerBounds", label: "Lower Bounds", storeTime: storeTime, updateCallback: () => {
                    setLowerBounds(dataDef.lowerBounds);
                    updateCallback();
                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "15px" }), (0, jsx_runtime_1.jsx)(PropertyEditorDate_1.PropertyEditorDate, { editObject: dataDef, propertyName: "upperBounds", label: "Upper Bounds", storeTime: storeTime, updateCallback: () => {
                    setUpperBounds(dataDef.upperBounds);
                    updateCallback();
                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "15px" })] }));
};
const NumberDataDefEditProperties = ({ dataDef, updateCallback }) => {
    const [allowDecimals, setAllowDecimals] = (0, react_1.useState)(dataDef.allowDecimals);
    // eslint-disable-next-line
    const [_, setLowerBounds] = (0, react_1.useState)(dataDef.lowerBounds);
    // eslint-disable-next-line
    const [__, setUpperBounds] = (0, react_1.useState)(dataDef.upperBounds);
    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "column", paddingTop: "15px", children: [(0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Allow Decimals", editObject: dataDef, propertyName: "allowDecimals", updateCallback: () => {
                    setAllowDecimals(dataDef.allowDecimals);
                    updateCallback();
                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "15px" }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: dataDef, propertyName: "lowerBounds", decimal: allowDecimals, updateCallback: () => {
                    setLowerBounds(dataDef.lowerBounds);
                    updateCallback();
                }, label: "Lower Bounds" }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "15px" }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: dataDef, propertyName: "upperBounds", decimal: allowDecimals, updateCallback: () => {
                    setUpperBounds(dataDef.upperBounds);
                    updateCallback();
                }, label: "Upper Bounds" }), (0, jsx_runtime_1.jsx)(material_1.Box, { paddingTop: "15px" })] }));
};
//# sourceMappingURL=DataDefEditLayer.js.map