"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XStackContainer = exports.StackContainerColumn = exports.StackContainerDiv = 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_beautiful_dnd_1 = require("react-beautiful-dnd");
const XDesignWrapper_1 = require("../Utilities/XDesignWrapper");
const XBaseStackContainer_1 = require("./XBaseStackContainer");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const PropertyEditorInteger_1 = require("../../CommonUI/PropertyEditing/PropertyEditorInteger");
const PropertyEditorColor_1 = require("../../CommonUI/PropertyEditing/PropertyEditorColor");
const XRuntimeWrapper_1 = require("../Utilities/XRuntimeWrapper");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
exports.StackContainerDiv = (0, styled_components_1.default)("div") `
    min-height: ${(props) => (props.padding || 0) + 75}px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: ${(props) => props.padding || 0}px;
    border: ${(props) => props.hasBorder
    ? `${(props.borderStyle || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_STYLE).toLowerCase()} ${props.borderWidth || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_COLOR}px ${props.borderColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_COLOR}`
    : "none"};
    border-radius: ${(props) => props.borderRadius || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_RADIOUS}px;
    // overflow: hidden;
    background-color: ${(props) => props.backgroundColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BACKGROUND_COLOR};
    position: relative;
`;
exports.StackContainerColumn = (0, styled_components_1.default)("div") `
    margin-top: ${(props) => props.colGap || 0}px;
    padding: ${(props) => props.padding || 0}px;

    &:first-child {
        margin-top: 0px;
    }
`;
class XStackContainer extends XBaseStackContainer_1.XBaseStackContainer {
    __type = "Stack Container";
    render() {
        let mode = this.getFormContext()?.mode ?? FormDesignConstants_1.FormMode.Runtime;
        if (mode === FormDesignConstants_1.FormMode.FormDesign) {
            return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: this.id, children: (provided, snapshot) => {
                    return ((0, jsx_runtime_1.jsxs)(exports.StackContainerDiv, { padding: this.getInnerMargin(), hasBorder: snapshot.isDraggingOver || this.hasBorder(), borderColor: (snapshot.isDraggingOver && FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_COLOR) ||
                            this.borderColor(), borderStyle: (snapshot.isDraggingOver && FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_STYLE) ||
                            this.borderStyle(), borderWidth: (snapshot.isDraggingOver && FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_WIDTH) ||
                            this.borderWidth(), borderRadius: (snapshot.isDraggingOver && FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_RADIUS) ||
                            this.borderRadius(), backgroundColor: this.backgroundColor(), ref: provided.innerRef, ...provided.droppableProps, children: [this.controls.map((control, index) => {
                                return ((0, jsx_runtime_1.jsx)(exports.StackContainerColumn, { colGap: this.interControlSpacing ||
                                        this.getFormContext()?.form?.defaultInterControlSpacing, id: control.id, children: (0, jsx_runtime_1.jsx)(XDesignWrapper_1.XDesignWrapper, { id: control.id, index: index, innerComponent: control, editContext: this.getFormContext(), children: control.render() }, control.id) }, index));
                            }), provided.placeholder, this.controls.length === 0 && this.renderEmptyControlDiv(this.getInnerMargin())] }));
                } }, this.id));
        }
        else {
            return ((0, jsx_runtime_1.jsxs)(exports.StackContainerDiv, { padding: this.getInnerMargin(), hasBorder: this.hasBorder(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), children: [this.controls.map((control, index) => {
                        return ((0, jsx_runtime_1.jsx)(exports.StackContainerColumn, { colGap: this.interControlSpacing || this.getFormContext()?.form?.defaultInterControlSpacing, id: control.id, children: (0, jsx_runtime_1.jsx)(XRuntimeWrapper_1.XRuntimeWrapper, { innerComponent: control, context: this.getFormContext() }) }, index));
                    }), this.controls.length === 0 &&
                        mode !== FormDesignConstants_1.FormMode.Runtime &&
                        this.renderEmptyControlDiv(this.getInnerMargin(), "Add controls in the form design tab")] }));
        }
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Control Gap", propertyName: "interControlSpacing", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultInterControlSpacing }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Inner Margin", propertyName: "innerMargin", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultInnerContainerMargin }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, label: "Container Color", propertyName: "containerBackgroundColor", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBackgroundColor }), this.renderBorderConfigUI()] }));
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type");
    }
}
exports.XStackContainer = XStackContainer;
//# sourceMappingURL=XStackContainer.js.map