"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XHStackContainer = exports.HStackVerticalAlignment = exports.HStackAlignment = 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 PropertyEditorSelect_1 = require("../../CommonUI/PropertyEditing/PropertyEditorSelect");
const PropertyEditorText_1 = require("../../CommonUI/PropertyEditing/PropertyEditorText");
const XRuntimeWrapper_1 = require("../Utilities/XRuntimeWrapper");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
var HStackAlignment;
(function (HStackAlignment) {
    HStackAlignment["LEFT"] = "Left";
    HStackAlignment["RIGHT"] = "Right";
    HStackAlignment["CENTER"] = "Center";
})(HStackAlignment = exports.HStackAlignment || (exports.HStackAlignment = {}));
var HStackVerticalAlignment;
(function (HStackVerticalAlignment) {
    HStackVerticalAlignment["TOP"] = "Top";
    HStackVerticalAlignment["BOTTOM"] = "Bottom";
    HStackVerticalAlignment["MIDDLE"] = "Middle";
})(HStackVerticalAlignment = exports.HStackVerticalAlignment || (exports.HStackVerticalAlignment = {}));
const HStackContainerDiv = (0, styled_components_1.default)("div") `
    padding: ${(props) => props.padding || 0}px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    min-height: ${(props) => (props.padding || 0) + props.minHeight}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;
`;
const HStackRowDiv = (0, styled_components_1.default)("div") `
    margin: ${(props) => (-1 * (props.colGap || 0)) / 2}px;
    flex-wrap: wrap;
    display: flex;
    justify-content: ${(props) => props.align};
    align-items: ${(props) => props.verticalAlign};
    width: 100%;
`;
const HStackColumn = (0, styled_components_1.default)("div") `
    margin: ${(props) => (props.colGap || 0) / 2}px;
`;
class XHStackContainer extends XBaseStackContainer_1.XBaseStackContainer {
    __type = "Horizontal Stack Container";
    alignment = HStackAlignment.LEFT;
    verticalAlignment = HStackVerticalAlignment.TOP;
    render() {
        let alignment = "flex-start";
        if (this.alignment === HStackAlignment.CENTER)
            alignment = "center";
        else if (this.alignment === HStackAlignment.RIGHT)
            alignment = "flex-end";
        let verticalAlign = "flex-start";
        if (this.verticalAlignment === HStackVerticalAlignment.MIDDLE)
            verticalAlign = "center";
        else if (this.verticalAlignment === HStackVerticalAlignment.BOTTOM)
            verticalAlign = "flex-end";
        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, { direction: "horizontal", droppableId: this.id, children: (provided, snapshot) => {
                    return ((0, jsx_runtime_1.jsxs)(HStackContainerDiv, { 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(), minHeight: this.controls.length > 0 ? 0 : 75, ref: provided.innerRef, ...provided.droppableProps, children: [(0, jsx_runtime_1.jsxs)(HStackRowDiv, { colGap: this.interControlSpacing ||
                                    this.getFormContext()?.form?.defaultInterControlSpacing, align: alignment, verticalAlign: verticalAlign, children: [this.controls.map((control, index) => {
                                        return ((0, jsx_runtime_1.jsx)(HStackColumn, { colGap: this.interControlSpacing ||
                                                this.getFormContext()?.form?.defaultInterControlSpacing, 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)(HStackContainerDiv, { minHeight: this.controls.length > 0 ? 0 : 75, padding: this.getInnerMargin(), hasBorder: this.hasBorder(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), children: [(0, jsx_runtime_1.jsx)(HStackRowDiv, { colGap: this.interControlSpacing || this.getFormContext()?.form?.defaultInterControlSpacing, align: alignment, verticalAlign: verticalAlign, children: this.controls.map((control, index) => {
                            return ((0, jsx_runtime_1.jsx)(HStackColumn, { colGap: this.interControlSpacing ||
                                    this.getFormContext()?.form?.defaultInterControlSpacing, 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)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this, label: "Alignment", propertyName: "alignment", options: ["Left", "Center", "Right"], updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this, label: "Vertical Alignment", propertyName: "verticalAlignment", options: ["Top", "Bottom", "Middle"], updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { 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", "alignment", "verticalAlignment");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "alignment", "verticalAlignment");
    }
}
exports.XHStackContainer = XHStackContainer;
//# sourceMappingURL=XHStackContainer.js.map