import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { Droppable } from "react-beautiful-dnd";
import { XDesignWrapper } from "../Utilities/XDesignWrapper";
import { XBaseStackContainer } from "./XBaseStackContainer";
import { FormMode, FormDesignConstants } from "../FormDesignConstants";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { XRuntimeWrapper } from "../Utilities/XRuntimeWrapper";
export var HStackAlignment;
(function (HStackAlignment) {
    HStackAlignment["LEFT"] = "Left";
    HStackAlignment["RIGHT"] = "Right";
    HStackAlignment["CENTER"] = "Center";
})(HStackAlignment || (HStackAlignment = {}));
export var HStackVerticalAlignment;
(function (HStackVerticalAlignment) {
    HStackVerticalAlignment["TOP"] = "Top";
    HStackVerticalAlignment["BOTTOM"] = "Bottom";
    HStackVerticalAlignment["MIDDLE"] = "Middle";
})(HStackVerticalAlignment || (HStackVerticalAlignment = {}));
const HStackContainerDiv = styled("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.CONTAINER_BORDER_STYLE).toLowerCase()} ${props.borderWidth || FormDesignConstants.CONTAINER_BORDER_COLOR}px ${props.borderColor || FormDesignConstants.CONTAINER_BORDER_COLOR}`
    : 'none')};
    border-radius: ${props => props.borderRadius || FormDesignConstants.CONTAINER_BORDER_RADIOUS}px;
    // overflow: hidden;
    background-color: ${props => props.backgroundColor || FormDesignConstants.CONTAINER_BACKGROUND_COLOR};
    position: relative;
`;
const HStackRowDiv = styled("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 = styled("div") `
    margin: ${(props) => (props.colGap || 0) / 2}px;
`;
export class XHStackContainer extends XBaseStackContainer {
    constructor() {
        super(...arguments);
        this.alignment = HStackAlignment.LEFT;
        this.verticalAlignment = HStackVerticalAlignment.TOP;
    }
    render() {
        var _a, _b, _c, _d;
        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 = (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : FormMode.Runtime;
        if (mode === FormMode.FormDesign) {
            return (_jsx(Droppable, Object.assign({ direction: "horizontal", droppableId: this.id }, { children: (provided, snapshot) => {
                    var _a, _b;
                    return (_jsxs(HStackContainerDiv, Object.assign({ padding: this.getInnerMargin(), hasBorder: snapshot.isDraggingOver || this.hasBorder(), borderColor: (snapshot.isDraggingOver && FormDesignConstants.DROPPABLE_BORDER_COLOR) || this.borderColor(), borderStyle: (snapshot.isDraggingOver && FormDesignConstants.DROPPABLE_BORDER_STYLE) || this.borderStyle(), borderWidth: (snapshot.isDraggingOver && FormDesignConstants.DROPPABLE_BORDER_WIDTH) || this.borderWidth(), borderRadius: (snapshot.isDraggingOver && FormDesignConstants.DROPPABLE_BORDER_RADIUS) || this.borderRadius(), backgroundColor: this.backgroundColor(), minHeight: this.controls.length > 0 ? 0 : 75, ref: provided.innerRef }, provided.droppableProps, { children: [_jsxs(HStackRowDiv, Object.assign({ colGap: this.interControlSpacing || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing), align: alignment, verticalAlign: verticalAlign }, { children: [this.controls.map((control, index) => {
                                        var _a, _b;
                                        return (_jsx(HStackColumn, Object.assign({ colGap: this.interControlSpacing || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing) }, { children: _jsx(XDesignWrapper, Object.assign({ id: control.id, index: index, innerComponent: control, editContext: this.getFormContext() }, { children: control.render() }), control.id) }), index));
                                    }), provided.placeholder] }), void 0), this.controls.length === 0 && this.renderEmptyControlDiv(this.getInnerMargin())] }), void 0));
                } }), this.id));
        }
        else {
            return (_jsxs(HStackContainerDiv, Object.assign({ 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: [_jsx(HStackRowDiv, Object.assign({ colGap: this.interControlSpacing || ((_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultInterControlSpacing), align: alignment, verticalAlign: verticalAlign }, { children: this.controls.map((control, index) => {
                            var _a, _b;
                            return (_jsx(HStackColumn, Object.assign({ colGap: this.interControlSpacing || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing) }, { children: _jsx(XRuntimeWrapper, { innerComponent: control, context: this.getFormContext() }, void 0) }), index));
                        }) }), void 0), this.controls.length === 0 && mode !== FormMode.Runtime && this.renderEmptyControlDiv(this.getInnerMargin(), 'Add controls in the form design tab')] }), void 0));
        }
    }
    renderEditUI() {
        var _a, _b, _c, _d, _e, _f;
        return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorInteger, { editObject: this, label: "Control Gap", propertyName: "interControlSpacing", updateCallback: this.controlUpdate, parentDefaultValue: (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this, label: "Inner Margin", propertyName: "innerMargin", updateCallback: this.controlUpdate, parentDefaultValue: (_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultInnerContainerMargin }, void 0),
                _jsx(PropertyEditorSelect, { editObject: this, label: 'Alignment', propertyName: 'alignment', options: ['Left', 'Center', 'Right'], updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorSelect, { editObject: this, label: 'Vertical Alignment', propertyName: 'verticalAlignment', options: ['Top', 'Bottom', 'Middle'], updateCallback: this.controlUpdate }, void 0),
                _jsx(PropertyEditorText, { editObject: this, label: "Container Color", propertyName: "containerBackgroundColor", updateCallback: this.controlUpdate, parentDefaultValue: (_f = (_e = this.getFormContext()) === null || _e === void 0 ? void 0 : _e.form) === null || _f === void 0 ? void 0 : _f.defaultContainerBackgroundColor }, void 0), this.renderBorderConfigUI()] }, void 0));
    }
}
//# sourceMappingURL=XHStackContainer.js.map