import _ from "lodash";
import React from "react";
import style from "./style";

/**
 * This component lets you further customize the Grid enclosure by consuming a variable
 * number of Grid columns.
 * @param {object} props The props
 * @returns {function} The component
 */
const Cell = props => (
  <div
    role="cell"
    style={{ ...style.generateCellStyle(props), ...props.style }}
    // {...props}
    onClick={_.get(props, "onClick", () => null)}
  >
    {props.children}
  </div>
);

Cell.defaultProps = {
  grow: 0,
  basis: "auto",
  align: "auto",
  order: 0
};

/**
 * This sets up a 12 column grid system that you can use to build layouts.
 * Its child elements are usually a collection Cell elements that consume a variable
 * number of grid columns.
 * @param {object} props The props
 * @returns {function} The component
 */
const Grid = props => (
  <div
    role="group"
    {..._.omit(props, ["wrap", "transparent", "vertical"])}
    style={{ ...style.generateGridStyle(props), ...props.style }}
  >
    {props.children}
  </div>
);
Grid.defaultProps = {
  wrap: false,
  justify: "start",
  align: "start"
};

export default Grid;
export { Cell };