import React from "react";
import classNames from "classnames";
import { BoxProps } from "../Box";
import { Grid } from "../Grid";
import { CardGroupContext } from "./CardGroupContext";
import { bem } from "../../utilities";

const cn = "CardGroup";

export interface CardGroupProps extends BoxProps {
  /**
   * If true, some or all of the cards in the group have an accent style.  This is needed to maintain consistent heights in `Card.Group`s with mixed accents
   */
  hasAccents?: boolean;
  /**
   * Value in pixels to be used for the height and width of each card in the group
   */
  cardSize?: number;
  /**
   * Value to be applied to the `grid-gap` CSS property of the grid.  Sets the spacing between cards.
   */
  gridGap?: string;
}

export const CardGroup = ({
  hasAccents = false,
  cardSize,
  gridGap = "20px",
  className,
  style,
  ...rest
}: CardGroupProps) => {
  const gridGapStyles = { gridGap };
  const cardSizeGridStyles = cardSize
    ? {
        gridTemplateColumns: `repeat(auto-fill, ${cardSize}px)`,
        gridAutoRows: `${cardSize}px`,
      }
    : {};

  const cardGroupStyles = {
    ...cardSizeGridStyles,
    ...gridGapStyles,
    ...style,
  };

  return (
    <CardGroupContext.Provider value={{ hasAccents }}>
      <Grid
        style={cardGroupStyles}
        className={classNames(bem(cn), className)}
        {...rest}
      />
    </CardGroupContext.Provider>
  );
};