import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import * as fixedCss from './styles/two-column-layout.m.css';
import * as css from '../theme/default/two-column-layout.m.css';
import * as baseCss from '../common/styles/base.m.css';
import breakpoint from '@dojo/framework/core/middleware/breakpoint';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import resize from '@dojo/framework/core/middleware/resize';
import drag from '@dojo/framework/core/middleware/drag';
const icache = createICacheMiddleware();
const factory = create({ theme, breakpoint, icache, resize, drag })
    .properties()
    .children();
export const TwoColumnLayout = factory(function TwoColumnLayout({ properties, children, middleware: { theme, breakpoint: breakpointMiddleware, icache, resize: resizeMiddleware, drag } }) {
    const { bias, breakpoint = 600, resize } = properties();
    const { breakpoint: currentBreakpoint } = breakpointMiddleware.get('root', {
        SMALL: 0,
        LARGE: breakpoint
    }) || { breakpoint: 'LARGE' };
    const size = resizeMiddleware.get('leading');
    let width = resize && icache.get('width');
    const shouldCollapse = currentBreakpoint === 'SMALL';
    const thumbDrag = drag.get('divider');
    if (resize && thumbDrag.isDragging && size) {
        const 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);
    }
    const classes = theme.classes(css);
    const { leading, trailing } = children()[0];
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            fixedCss.root,
            classes.root,
            typeof width === 'number' && fixedCss.resize
        ] },
        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 && tsx("div", { classes: classes.divider, key: "divider" }),
        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)));
});
export default TwoColumnLayout;

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