"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormUI = exports.FormTestResult = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const react_1 = require("react");
const ExecutionData_1 = require("@appglue/common/dist/Common/Data/ExecutionData/ExecutionData");
const BaseTestResultData_1 = require("@appglue/common/dist/Common/Testing/BaseTestResultData");
const TestResultDataType_1 = require("@appglue/common/dist/Common/Testing/TestResultDataType");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const FormContext_1 = require("../Utilities/FormContext");
const core_1 = require("@material-ui/core");
const OpenReverseIcon_1 = require("../../CommonUI/Icon/OpenReverseIcon");
const OpenBlueIcon_1 = require("../../CommonUI/Icon/OpenBlueIcon");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const TestResult_1 = require("../../CommonUI/Testing/TestResult");
class FormTestResult extends BaseTestResultData_1.BaseTestResultData {
    type = TestResultDataType_1.TestResultDataType.FORM;
    form;
    formContext;
    startData;
    constructor(form, data, result) {
        super(form._id, result);
        this.form = form;
        this.formContext = new FormContext_1.FormContext(form);
        this.formContext.mode = FormDesignConstants_1.FormMode.Runtime;
        form.setFormContext(this.formContext);
        this.startData = data ? new ExecutionData_1.ExecutionData(data.values) : new ExecutionData_1.ExecutionData();
        this.formContext.setFormData(data ?? new ExecutionData_1.ExecutionData());
    }
}
exports.FormTestResult = FormTestResult;
const FormUI = ({ renderUI, context }) => {
    const [openDataLayer, setOpenDataLayer] = (0, react_1.useState)(true);
    const [showResult, setShowResult] = (0, react_1.useState)(false);
    context.resultPromise.then(() => {
        setShowResult(true);
    });
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormUIRender, { children: [(0, jsx_runtime_1.jsxs)(FormDataRender, { children: [(0, jsx_runtime_1.jsx)(OpenButton, { onClick: () => setOpenDataLayer(!openDataLayer), children: openDataLayer ? (0, jsx_runtime_1.jsx)(OpenReverseIcon_1.OpenReverseIcon, {}) : (0, jsx_runtime_1.jsx)(OpenBlueIcon_1.OpenBlueIcon, {}) }), openDataLayer && ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: context, control: () => ((0, jsx_runtime_1.jsx)(core_1.TextareaAutosize, { "data-testid": "runtime-json-textarea", value: JSON.stringify(context.data.values, null, 2), style: {
                                        width: "100%",
                                        border: "solid 1px #E6E9ED",
                                        borderRadius: "5px",
                                        color: "#01244E",
                                    }, minRows: 20 })) }))] }), (0, jsx_runtime_1.jsx)(FormRender, { children: renderUI() })] }), showResult ? (0, jsx_runtime_1.jsx)(TestResult_1.TestResult, { executableId: context.form._id }) : null] }));
};
exports.FormUI = FormUI;
const FormUIRender = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
`;
const FormRender = styled_components_1.default.div `
    flex: 1;
    overflow: auto;

    padding: 15px;
`;
const FormDataRender = styled_components_1.default.div `
    position: relative;
`;
const OpenButton = styled_components_1.default.div `
    width: 16px;
    height: 16px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    left: 100%;
    top: 0;

    background: #fff;
`;
//# sourceMappingURL=FormTestResult.js.map