import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import ConfigContext from './ConfigContext';
import LayoutBreakpointContext from './BreakPointContext';
import { getValueForBreakpoint } from './screen-breakpoints';
var LayoutRow = (function (_super) {
    __extends(LayoutRow, _super);
    function LayoutRow() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LayoutRow.prototype.render = function () {
        var _this = this;
        var _a = this.props, className = _a.className, style = _a.style, justify = _a.justify, align = _a.align, others = __rest(_a, ["className", "style", "justify", "align"]);
        var classes = cx({
            'zent-row': true,
        }, "zent-row-justify-" + justify, "zent-row-align-" + align, className);
        return (_jsx(LayoutBreakpointContext.Consumer, { children: function (breakpoints) { return (_jsx(ConfigContext.Consumer, { children: function (config) {
                    var colGutter = getValueForBreakpoint(breakpoints, config.colGutter);
                    var rowGutter = getValueForBreakpoint(breakpoints, config.rowGutter);
                    var rowStyles = style;
                    if (colGutter > 0) {
                        var width = -(colGutter / 2);
                        rowStyles = __assign(__assign({}, rowStyles), { marginLeft: width, marginRight: width });
                    }
                    if (rowGutter && rowGutter > 0) {
                        var height = rowGutter / 2;
                        rowStyles = __assign(__assign({}, rowStyles), { paddingTop: height, paddingBottom: height });
                    }
                    return (_jsx("div", __assign({}, others, { className: classes, style: rowStyles, "data-zv": 'v10.0.11' }, { children: _this.props.children }), void 0));
                } }, void 0)); } }, void 0));
    };
    LayoutRow.defaultProps = {
        justify: 'start',
        align: 'start',
    };
    return LayoutRow;
}(Component));
export { LayoutRow };
export default LayoutRow;
