"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XUserFormTester = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const core_1 = require("@material-ui/core");
const XFormDesignerLayoutPanel_1 = require("./XFormDesignerLayoutPanel");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const UIButton_1 = require("../../CommonUI/BuildlingBlocks/UIButton");
const TestDiv = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    min-height: 100px;
    width: 100%;
`;
const TestToolbox = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    flex-basis: 236px;
    border: 1px solid #e6e9ed;
    border-radius: 0;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;

    @media (min-width: 1366px) {
        flex-basis: calc(236px + 59 * (100vw - 1366px) / 554);
        padding-left: calc(15px + 10 * (100vw - 1366px) / 554);
        padding-right: calc(15px + 15 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        flex-basis: 295px;
        padding-left: 25px;
        padding-top: 29px;
        padding-right: 30px;
    }
`;
class XUserFormTester extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = {
            resultValue: JSON.stringify(props.editContext.getFormData().values, null, 2),
        };
        // props.editContext.onFormDataChange = data => {
        //     this.setState({ 'resultValue': JSON.stringify(data, null, 2) });
        // }
    }
    componentDidUpdate() {
        const newFormValue = JSON.stringify(this.props.editContext.getFormData().values, null, 2);
        if (newFormValue !== this.state.resultValue) {
            this.setState({
                resultValue: newFormValue,
            });
        }
    }
    updateUI() {
        this.forceUpdate();
    }
    render() {
        //let form = new XUserForm({ form: this.props.form });
        return ((0, jsx_runtime_1.jsxs)(TestDiv, { children: [(0, jsx_runtime_1.jsxs)(TestToolbox, { children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.editContext, control: () => ((0, jsx_runtime_1.jsx)(core_1.TextareaAutosize, { "data-testid": "runtime-json-textarea", value: JSON.stringify(this.props.editContext.getFormData().values, null, 2), style: {
                                    width: "100%",
                                    border: "solid 1px #E6E9ED",
                                    borderRadius: "5px",
                                    color: "#01244E",
                                }, minRows: 20 })) }), (0, jsx_runtime_1.jsx)(UIButton_1.UIButton, { variant: "contained", children: "Save as Sample" })] }), (0, jsx_runtime_1.jsx)(XFormDesignerLayoutPanel_1.XFormDesignerLayoutPanel, { editContext: this.props.editContext })] }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XUserFormTester.prototype, "updateUI", null);
exports.XUserFormTester = XUserFormTester;
//# sourceMappingURL=XUserFormTester.js.map