import React, { Children } from 'react';
import { useTheme } from '@material-ui/core';
import { GridUnit } from './GridUnit';
import { GridRow } from './GridRow';
import { getRatio } from './getRatio';
export const GridGroup = ({ col1, col2, col3, col4, col5, col6, ratio, highlight }) => {
    const theme = useTheme();
    const cnt = Children.toArray(col1).length;
    const cnt2 = Children.toArray(col2).length;
    const cnt3 = Children.toArray(col3).length;
    const cnt4 = Children.toArray(col4).length;
    const cnt5 = Children.toArray(col5).length;
    const cnt6 = Children.toArray(col6).length;
    const number = cnt + cnt2 + cnt3 + cnt4 + cnt5 + cnt6;
    const width = theme.spacing(154) / number / 8;
    const ratioArr = getRatio(ratio);
    const staticDisplay = (React.createElement(GridRow, { highlight: highlight }, number >= 1 && (React.createElement(GridUnit, { width: theme.spacing(width), columnPadding: 8 * number - 8, r1: ratioArr[0], r2: ratioArr[1] }, col1)), number >= 2 && (React.createElement(GridUnit, { width: theme.spacing(width), columnPadding: 8 * number - 8, r1: ratioArr[0], r2: ratioArr[1] }, col2)), number >= 3 && (React.createElement(GridUnit, { width: theme.spacing(width), columnPadding: 8 * number - 8, r1: ratioArr[0], r2: ratioArr[1] }, col3)), number >= 4 && (React.createElement(GridUnit, { width: theme.spacing(width), columnPadding: 8 * number - 8, r1: ratioArr[0], r2: ratioArr[1] }, col4)), number >= 5 && (React.createElement(GridUnit, { width: theme.spacing(width), columnPadding: 8 * number - 8, r1: ratioArr[0], r2: ratioArr[1] }, col5)), number >= 6 && (React.createElement(GridUnit, { width: theme.spacing(width), columnPadding: 8 * number - 8, r1: ratioArr[0], r2: ratioArr[1] }, col6))));
    return React.createElement("div", null, " ", staticDisplay, " ");
};
//# sourceMappingURL=GridGroup.js.map