import React from 'react';
import { string, number, array, arrayOf, oneOfType, bool } from 'prop-types';
import Box from '../Box';
import { mapResponsive } from '../../../utils/styled';

const Grid = ({
  columns,
  minChildWidth,
  gap = 'gutter',
  rowGap = gap,
  equalRows,
  equalColumns = true,
  ...rest
}) => {
  const templateColumns = minChildWidth
    ? widthToColumns(minChildWidth, equalColumns)
    : countToColumns(columns, equalColumns);

  return (
    <Box
      display="grid"
      gridColumnGap={gap}
      gridRowGap={rowGap}
      gridTemplateColumns={templateColumns}
      gridAutoRows={equalRows ? '1fr' : undefined}
      {...rest}
    />
  );
};

Grid.propTypes = {
  columns: oneOfType([number, arrayOf(number)]),
  minChildWidth: oneOfType([number, arrayOf(number)]),
  gap: oneOfType([string, number, array]),
  rowGap: oneOfType([string, number, array]),
  equalRows: bool,
  equalColumns: bool,
};

function toPx(n) {
  return typeof n === 'number' ? n + 'px' : n;
}

function widthToColumns(width, equalColumns) {
  return mapResponsive(
    width,
    (value) => `repeat(auto-fit, minmax(${toPx(value)}, ${equalColumns ? '1fr' : 'auto'}))`,
  );
}

function countToColumns(count, equalColumns) {
  return mapResponsive(count, (value) => `repeat(${value}, ${equalColumns ? '1fr' : 'auto'})`);
}

export default Grid;