"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var vdom_1 = require("@dojo/framework/core/vdom");
var breakpoint_1 = require("@dojo/framework/core/middleware/breakpoint");
var theme_1 = require("../middleware/theme");
var fixedCss = require("./styles/three-column-layout.m.css");
var baseCss = require("../common/styles/base.m.css");
var css = require("../theme/default/three-column-layout.m.css");
var factory = vdom_1.create({ breakpoint: breakpoint_1.default, theme: theme_1.default })
    .properties()
    .children();
exports.ThreeColumnLayout = factory(function ThreeColumnLayout(_a) {
    var properties = _a.properties, children = _a.children, _b = _a.middleware, breakpoint = _b.breakpoint, theme = _b.theme;
    var _c = properties(), _d = _c.twoColumnBreakpoint, twoColumnBreakpoint = _d === void 0 ? 1024 : _d, _e = _c.oneColumnBreakpoint, oneColumnBreakpoint = _e === void 0 ? 600 : _e, _f = _c.bias, bias = _f === void 0 ? 'leading' : _f;
    var _g = tslib_1.__read(children(), 1), _h = _g[0], leading = _h.leading, center = _h.center, trailing = _h.trailing;
    var classes = theme.classes(css);
    var currentBreakpoint = (breakpoint.get('root', {
        LARGE: twoColumnBreakpoint,
        MEDIUM: oneColumnBreakpoint,
        SMALL: 0
    }) || { breakpoint: 'LARGE' }).breakpoint;
    var shouldCollapseLeading = currentBreakpoint === 'SMALL' || (currentBreakpoint === 'MEDIUM' && bias === 'trailing');
    var shouldCollapseTrailing = currentBreakpoint === 'SMALL' || (currentBreakpoint === 'MEDIUM' && bias === 'leading');
    return (vdom_1.tsx("div", { key: "root", classes: [theme.variant(), fixedCss.root, classes.root] },
        vdom_1.tsx("div", { key: "leading", classes: [classes.leading, shouldCollapseLeading && baseCss.visuallyHidden] }, leading),
        vdom_1.tsx("div", { key: "center", classes: [fixedCss.center, classes.center] }, center),
        vdom_1.tsx("div", { key: "trailing", classes: [classes.trailing, shouldCollapseTrailing && baseCss.visuallyHidden] }, trailing)));
});
exports.default = exports.ThreeColumnLayout;

/*# sourceMappingURL=index.js.map*/