"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vdom_1 = require("@dojo/framework/core/vdom");
var theme_1 = require("../middleware/theme");
var fixedCss = require("./styles/two-column-layout.m.css");
var css = require("../theme/default/two-column-layout.m.css");
var baseCss = require("../common/styles/base.m.css");
var breakpoint_1 = require("@dojo/framework/core/middleware/breakpoint");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var resize_1 = require("@dojo/framework/core/middleware/resize");
var drag_1 = require("@dojo/framework/core/middleware/drag");
var icache = icache_1.createICacheMiddleware();
var factory = vdom_1.create({ theme: theme_1.default, breakpoint: breakpoint_1.default, icache: icache, resize: resize_1.default, drag: drag_1.default })
    .properties()
    .children();
exports.TwoColumnLayout = factory(function TwoColumnLayout(_a) {
    var properties = _a.properties, children = _a.children, _b = _a.middleware, theme = _b.theme, breakpointMiddleware = _b.breakpoint, icache = _b.icache, resizeMiddleware = _b.resize, drag = _b.drag;
    var _c = properties(), bias = _c.bias, _d = _c.breakpoint, breakpoint = _d === void 0 ? 600 : _d, resize = _c.resize;
    var currentBreakpoint = (breakpointMiddleware.get('root', {
        SMALL: 0,
        LARGE: breakpoint
    }) || { breakpoint: 'LARGE' }).breakpoint;
    var size = resizeMiddleware.get('leading');
    var width = resize && icache.get('width');
    var shouldCollapse = currentBreakpoint === 'SMALL';
    var thumbDrag = drag.get('divider');
    if (resize && thumbDrag.isDragging && size) {
        var currentWidth = typeof width === 'number' ? width : size.width;
        width = icache.set('width', thumbDrag.delta.x + currentWidth);
    }
    else if (resize &&
        !thumbDrag.isDragging &&
        typeof width === 'number' &&
        size &&
        size.width !== width) {
        width = icache.set('width', size.width);
    }
    var classes = theme.classes(css);
    var _e = children()[0], leading = _e.leading, trailing = _e.trailing;
    return (vdom_1.tsx("div", { key: "root", classes: [
            theme.variant(),
            fixedCss.root,
            classes.root,
            typeof width === 'number' && fixedCss.resize
        ] },
        vdom_1.tsx("div", { key: "leading", classes: [
                bias === 'leading' && fixedCss.biased,
                bias === undefined && !shouldCollapse && fixedCss.even,
                bias === 'trailing' && shouldCollapse && baseCss.visuallyHidden,
                bias === 'trailing' && !shouldCollapse && classes.small,
                classes.column
            ], styles: typeof width === 'number' ? { flexBasis: width + "px" } : {} }, leading),
        resize && !shouldCollapse && vdom_1.tsx("div", { classes: classes.divider, key: "divider" }),
        vdom_1.tsx("div", { key: "trailing", classes: [
                bias === 'trailing' && fixedCss.biased,
                bias === undefined && !shouldCollapse && fixedCss.even,
                (bias === 'leading' || bias === undefined) &&
                    shouldCollapse &&
                    baseCss.visuallyHidden,
                bias === 'leading' && !shouldCollapse && classes.small,
                classes.column
            ] }, trailing)));
});
exports.default = exports.TwoColumnLayout;

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