"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XBuilderEditPage = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_json_editor_ajrm_1 = tslib_1.__importDefault(require("react-json-editor-ajrm"));
const Alert_1 = tslib_1.__importDefault(require("@mui/material/Alert"));
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const UIFormControlLabel_1 = require("../BuildlingBlocks/UIFormControlLabel");
const UICheckbox_1 = require("../BuildlingBlocks/UICheckbox");
const StyledButton_1 = require("../BuildlingBlocks/StyledButton");
const JsonInputLocale_1 = require("@appglue/common/dist/Common/JsonInputLocale");
const Log_1 = require("@appglue/common/dist/Log");
const LogLevel_1 = require("@appglue/common/dist/Plugins/Logging/LogLevel");
const JSONWrapper = styled_components_1.default.div `
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
`;
const TextAreaWrapper = styled_components_1.default.div `
    width: 100%;
    overflow: auto;
    flex: 1;
`;
class XBuilderEditPage extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: {},
            allowEdit: false,
            errors: undefined,
        };
    }
    componentDidMount() {
        let data = this.props.builder.getStorageData();
        this.setState({
            content: data,
        });
    }
    componentDidUpdate(prevProps) {
        const prevContent = JSON.stringify(prevProps.builder.getStorageData(), null, 2);
        const currentContent = JSON.stringify(this.props.builder.getStorageData(), null, 2);
        if (prevContent !== currentContent) {
            this.setState({
                content: this.props.builder.getStorageData(),
            });
        }
    }
    onClickSave() {
        try {
            const sasobj = this.state.content;
            this.props.builder.setStorageData(sasobj);
        }
        catch (e) {
            (0, Log_1.log)("Builder Edit Page", LogLevel_1.LogLevel.ERROR, e.toString());
            this.setState({
                errors: {
                    issue: e.message,
                    onClick: () => { },
                },
            });
        }
    }
    onChangeAllow(event) {
        this.setState({
            allowEdit: event.target.checked,
        });
    }
    onCloseParseJSONDialog = () => {
        this.setState({ errors: undefined });
    };
    onCloseLeavingDialog = () => {
        // this.props.onNextMode(true);
    };
    onChange = (newConf) => {
        // only update for valid jsObject
        let jsObject = Reflect.get(newConf, "jsObject");
        if (jsObject)
            this.setState({
                content: jsObject,
            });
    };
    render() {
        return ((0, jsx_runtime_1.jsxs)(JSONWrapper, { children: [(0, jsx_runtime_1.jsxs)(JSONHeader, { children: [(0, jsx_runtime_1.jsx)(UIFormControlLabel_1.UIFormControlLabel, { label: "Allow Editing", control: (0, jsx_runtime_1.jsx)(UICheckbox_1.StyledCheckBox, { color: "primary", checked: this.state.allowEdit, onChange: this.onChangeAllow.bind(this) }) }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", onClick: this.onClickSave.bind(this), disabled: !this.state.allowEdit, children: "Save Data" })] }), (0, jsx_runtime_1.jsx)(TextAreaWrapper, { children: (0, jsx_runtime_1.jsx)(react_json_editor_ajrm_1.default, { placeholder: this.state.content, locale: JsonInputLocale_1.locale, viewOnly: !this.state.allowEdit, theme: "light_mitsuketa_tribute", onChange: this.onChange, "data-testid": "StorageEdit", style: {
                            outerBox: {
                                width: "100%",
                                height: "100%",
                            },
                            container: {
                                width: "100%",
                                height: "100%",
                            },
                        } }) }), (0, jsx_runtime_1.jsxs)(core_1.Dialog, { onClose: this.onCloseParseJSONDialog, "aria-labelledby": "confirmation-dialog", open: !!this.state.errors, children: [(0, jsx_runtime_1.jsx)(Alert_1.default, { severity: "error", children: "Error" }), (0, jsx_runtime_1.jsx)(core_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(core_1.DialogContentText, { children: this.state.errors?.issue }) }), (0, jsx_runtime_1.jsx)(core_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: this.onCloseParseJSONDialog, color: "primary", children: "Ok" }) })] })] }));
    }
}
exports.XBuilderEditPage = XBuilderEditPage;
const JSONHeader = styled_components_1.default.div `
    display: flex;
    padding: 6px 12px;

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