import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import ConfigContext from './ConfigContext';
import BreakPointHub from './BreakPointHub';
import LayoutBreakpointContext from './BreakPointContext';
import { BREAKPOINTS, getValueForBreakpoint } from './screen-breakpoints';
var LayoutGrid = (function (_super) {
    __extends(LayoutGrid, _super);
    function LayoutGrid() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            breakpoints: {},
        };
        _this.onBreakpointChange = function (name, matched) {
            _this.setState(function (prevState) {
                var _a;
                var breakpoints = prevState.breakpoints;
                return {
                    breakpoints: __assign(__assign({}, breakpoints), (_a = {}, _a[name] = matched, _a)),
                };
            });
        };
        return _this;
    }
    LayoutGrid.prototype.render = function () {
        var _this = this;
        var _a = this.props, className = _a.className, style = _a.style, others = __rest(_a, ["className", "style"]);
        var breakpoints = this.state.breakpoints;
        return (_jsx(ConfigContext.Consumer, { children: function (config) {
                var rowGutter = getValueForBreakpoint(breakpoints, config.rowGutter);
                var layoutStyles = style;
                if (rowGutter > 0) {
                    var height = -(rowGutter / 2);
                    layoutStyles = __assign(__assign({}, layoutStyles), { marginTop: height, marginBottom: height });
                }
                return (_jsxs("div", __assign({}, others, { className: cx('zent-layout-grid', className), style: layoutStyles, "data-zv": 'v10.0.12' }, { children: [_jsx(LayoutBreakpointContext.Provider, __assign({ value: breakpoints }, { children: _this.props.children }), void 0), _jsx(BreakPointHub, { breakpoints: BREAKPOINTS, onChange: _this.onBreakpointChange }, void 0)] }), void 0));
            } }, void 0));
    };
    return LayoutGrid;
}(Component));
export { LayoutGrid };
export default LayoutGrid;
