import { styled } from '../styled';
import { GridComponent } from './GridComponent';
/**
 * Если аргумент - массив, то возвращаем его, иначе кладем аргумент в массив
 */
const ensureArray = (arg) => Array.isArray(arg) ? arg : [arg];
/**
 * Проходит по массиву со значениями отступов и превращает в строку
 */
const setCss = (prop, theme) => ensureArray(prop)
    .map((value) => theme.spacing(value))
    .join(' ');
const getTemplateStyle = (value) => {
    if (typeof value === 'number') {
        return `repeat(${value}, 1fr)`;
    }
    return value;
};
export const StyledGrid = styled(GridComponent, {
    shouldForwardProp: (prop) => ![
        'container',
        'columns',
        'rows',
        'direction',
        'columnSpacing',
        'rowSpacing',
        'spacing',
    ].includes(prop),
}) `
  ${({ theme, columnSpacing }) => columnSpacing && `column-gap: ${theme.spacing(columnSpacing)};`};
  ${({ theme, rowSpacing }) => rowSpacing && `row-gap: ${theme.spacing(rowSpacing)};`};
  ${({ theme, spacing }) => spacing && `gap: ${setCss(spacing, theme)};`};
  ${({ container, spacing, rowSpacing, columnSpacing }) => (spacing || rowSpacing || container || columnSpacing) && 'display: grid'};
  grid-template-columns: ${({ columns }) => getTemplateStyle(columns)};
  grid-template-rows: ${({ rows }) => getTemplateStyle(rows)};
  ${({ direction }) => direction && `grid-auto-flow: ${direction}`};
`;
