"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataBuilder = exports.IDefinitionEditorMode = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const UndefinedDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/UndefinedDataDefinition");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const lab_1 = require("@mui/lab");
const material_1 = require("@mui/material");
const DefinitionWithExample_1 = require("../CommonUI/DataDesigner/Components/DefinitionWithExample");
const JSONUIComponent_1 = require("../CommonUI/DataDesigner/Components/JSONUIComponent");
const SchemaUIComponent_1 = require("../CommonUI/DataDesigner/Components/SchemaUIComponent");
const Object_1 = require("../CommonUI/DataEditing/Object");
const ObserveState_1 = require("../CommonUI/StateManagement/ObserveState");
const TextIcon_1 = require("../CommonUI/TextIcon");
const DataDefinitionDiv = styled_components_1.default.div `
    width: 100%;
    height: 100vh;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .XDataDef-root {
        flex: 1;
        overflow: auto;
    }
`;
var IDefinitionEditorMode;
(function (IDefinitionEditorMode) {
    IDefinitionEditorMode["Definition"] = "Definition";
    IDefinitionEditorMode["Data"] = "Data";
    IDefinitionEditorMode["JSON"] = "JSON";
    IDefinitionEditorMode["SCHEMA"] = "JSON SCHEMA";
})(IDefinitionEditorMode = exports.IDefinitionEditorMode || (exports.IDefinitionEditorMode = {}));
const DataBuilder = function (props) {
    const [mode, setMode] = (0, react_1.useState)(IDefinitionEditorMode.Definition);
    const [defError, setDefError] = (0, react_1.useState)("");
    const [errorDialogOpen, setErrorDialogOpen] = (0, react_1.useState)(false);
    function validateUndefinedDefinition(fields) {
        let validation = true;
        for (let field of fields) {
            if (field instanceof UndefinedDataDefinition_1.UndefinedDataDefinition) {
                validation = false;
            }
            else {
                if (field.fields) {
                    validation = validateUndefinedDefinition(field.fields);
                }
            }
        }
        return validation;
    }
    const onChangeMode = (_event, value) => {
        const validation = validateUndefinedDefinition(props.definition.fields);
        if (validation === true) {
            setMode(value);
        }
        else {
            setDefError("Please delete all undefined definitions");
            setErrorDialogOpen(true);
        }
    };
    const handleErrorDialogClose = () => {
        setErrorDialogOpen(false);
    };
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.definition, control: () => {
            const isHideExampleDataSide = DataUtilities_1.DataUtilities.containsObjectListField(props.definition);
            let tempObj = new ObjectDataDefinition_1.ObjectDataDefinition();
            tempObj.fields = props.definition.fields;
            const tabs = [
                (0, jsx_runtime_1.jsx)(StyledTab, { value: IDefinitionEditorMode.Definition, icon: (0, jsx_runtime_1.jsx)(TextIcon_1.TextIcon, { name: "D" }), label: "Definition", wrapped: true, id: IDefinitionEditorMode.Definition, "aria-controls": `wrapped-tabpanel-${IDefinitionEditorMode.Definition}` }, "Definition"),
                (0, jsx_runtime_1.jsx)(StyledTab, { value: IDefinitionEditorMode.JSON, icon: (0, jsx_runtime_1.jsx)(TextIcon_1.TextIcon, { name: "J" }), label: "JSON", wrapped: true, id: IDefinitionEditorMode.JSON, "aria-controls": `wrapped-tabpanel-${IDefinitionEditorMode.JSON}` }, "JSON"),
                (0, jsx_runtime_1.jsx)(StyledTab, { value: IDefinitionEditorMode.SCHEMA, icon: (0, jsx_runtime_1.jsx)(TextIcon_1.TextIcon, { name: "S" }), label: "JSON SCHEMA", wrapped: true, id: IDefinitionEditorMode.SCHEMA, "aria-controls": `wrapped-tabpanel-${IDefinitionEditorMode.SCHEMA}` }, "JSON SCHEMA"),
            ];
            if (isHideExampleDataSide) {
                tabs.splice(1, 0, (0, jsx_runtime_1.jsx)(StyledTab, { value: IDefinitionEditorMode.Data, icon: (0, jsx_runtime_1.jsx)(TextIcon_1.TextIcon, { name: "D" }), label: "Example Data", wrapped: true, id: IDefinitionEditorMode.Data, "aria-controls": `wrapped-tabpanel-${IDefinitionEditorMode.Data}` }, "Data"));
            }
            return ((0, jsx_runtime_1.jsxs)(DataDefinitionDiv, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabContext, { value: mode, children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, { onChange: onChangeMode, indicatorColor: "primary", textColor: "primary", children: tabs }), isHideExampleDataSide && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { value: IDefinitionEditorMode.Data, classes: { root: "XDataDef-root" }, children: (0, jsx_runtime_1.jsx)(Object_1.EditModeObjectValueEditor, { value: props.definition.value, forData: tempObj, editMode: "inline", onUpdate: (newValue) => {
                                        props.definition.value = newValue;
                                        StateManager_1.StateManager.changed(props.definition);
                                    } }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, { value: IDefinitionEditorMode.Definition, classes: { root: "XDataDef-root" }, children: (0, jsx_runtime_1.jsx)(DefinitionWithExample_1.DefinitionWithExample, { definition: props.definition, readOnly: props.readOnly }) }), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, { value: IDefinitionEditorMode.JSON, classes: { root: "XDataDef-root" }, children: (0, jsx_runtime_1.jsx)(JSONUIComponent_1.JSONUIComponent, { definition: props.definition }) }), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, { value: IDefinitionEditorMode.SCHEMA, classes: { root: "XDataDef-root" }, children: (0, jsx_runtime_1.jsx)(SchemaUIComponent_1.SchemaUIComponent, { definition: props.definition }) })] }), (0, jsx_runtime_1.jsx)(core_1.Dialog, { onClose: handleErrorDialogClose, "aria-labelledby": "simple-dialog-title", open: errorDialogOpen, children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: defError }) })] }));
        } }));
};
exports.DataBuilder = DataBuilder;
const StyledTab = (0, styled_components_1.default)(core_1.Tab) `
    && {
        min-height: 0;

        &.MuiTab-labelIcon .MuiTab-wrapper > *:first-child {
            margin-right: 5px;
            margin-bottom: 0;
        }

        .MuiTab-wrapper {
            flex-direction: row;
        }
    }
`;
//# sourceMappingURL=DataBuilder.js.map