import { __assign } from "tslib";
/** @jsx jsx */
import { jsx } from '@emotion/core';
var getPercentFromGridWidth = function (width) {
    if (width === 12) {
        return 100;
    }
    return (100 * width) / 12;
};
var defWidth = function (width) { return ({
    flexBasis: "calc(" + width + "% - 15px)",
    maxWidth: "calc(" + width + "% - 15px)",
    minWidth: "calc(" + width + "% - 15px)",
}); };
function getStyles(amountOfCells, width) {
    var baseStyles = {
        'flex-wrap': 'wrap',
        marginLeft: 15,
        flexGrow: 0,
        flexShrink: 1,
        marginBottom: 15,
    };
    var mediaQueries = {};
    if (Array.isArray(width)) {
        mediaQueries = __assign({}, defWidth(getPercentFromGridWidth(width[0])));
        if (width[1]) {
            mediaQueries = __assign(__assign({}, mediaQueries), { '@media (min-width: 768px)': __assign({}, defWidth(getPercentFromGridWidth(width[1]))) });
        }
        if (width[2]) {
            mediaQueries = __assign(__assign({}, mediaQueries), { '@media (min-width: 992px)': __assign({}, defWidth(getPercentFromGridWidth(width[2]))) });
        }
        if (width[3]) {
            mediaQueries = __assign(__assign({}, mediaQueries), { '@media (min-width: 1200px)': __assign({}, defWidth(getPercentFromGridWidth(width[3]))) });
        }
        return __assign(__assign({}, mediaQueries), baseStyles);
    }
    if (amountOfCells >= 4) {
        mediaQueries = __assign(__assign({}, mediaQueries), { '@media screen and (max-width: 900px)': __assign({}, defWidth(100 / 2)) });
    }
    if (amountOfCells === 3) {
        mediaQueries = __assign(__assign({}, mediaQueries), { '@media screen and (max-width: 700px)': __assign(__assign({}, defWidth(100 / 2)), { '&:first-child': __assign({}, defWidth(100 / 1)) }) });
    }
    mediaQueries = __assign(__assign({}, mediaQueries), { '@media screen and (max-width: 550px)': __assign({}, defWidth(100 / 1)) });
    return __assign(__assign(__assign({}, mediaQueries), defWidth(100 / amountOfCells)), baseStyles);
}
export var Cell = function (_a) {
    var _b = _a.amountOfCells, amountOfCells = _b === void 0 ? 1 : _b, width = _a.width, children = _a.children;
    return jsx("div", { css: getStyles(amountOfCells, width) }, children);
};
//# sourceMappingURL=index.js.map