import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["container", "item", "alignItems", "justify", "spacing", "direction", "xs", "sm", "md", "lg", "xl", "children", "className"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import makeStyles from "../styles/makeStyles";
var COLUMNS = 12;

var normalizeSpacing = function normalizeSpacing(spacing) {
  return spacing === true ? 2 : spacing;
};

var generateItemWidth = function generateItemWidth(size) {
  if (size === "auto") {
    return {
      flexGrow: 0,
      maxWidth: "none",
      flexBasis: "auto"
    };
  }

  if (size === true) {
    return {
      flexGrow: 1,
      maxWidth: "100%",
      flexBasis: 0
    };
  }

  return {
    flexGrow: 0,
    flexBasis: "".concat(Number((size / COLUMNS * 100).toFixed(4)), "%"),
    maxWidth: "".concat(Number((size / COLUMNS * 100).toFixed(4)), "%")
  };
};

var useStyles = makeStyles(function (theme) {
  return {
    base: {
      boxSizing: "border-box"
    },
    container: function container(props) {
      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
        width: "100%",
        display: "flex",
        flexWrap: "wrap"
      }, props.justify && {
        justifyContent: props.justify
      }), props.alignItems && {
        alignItems: props.alignItems
      }), props.direction && {
        flexDirection: props.direction
      }), props.spacing && {
        width: "calc(100% + ".concat(theme.spacing(props.spacing), "px)"),
        margin: theme.spacing(-props.spacing / 2),
        "& > *": {
          padding: theme.spacing(props.spacing / 2)
        }
      });
    },
    item: function item(props) {
      return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
        margin: 0
      }, props.xs && generateItemWidth(props.xs)), props.sm && _defineProperty({}, theme.breakpoints.up("sm"), generateItemWidth(props.sm))), props.md && _defineProperty({}, theme.breakpoints.up("md"), generateItemWidth(props.md))), props.lg && _defineProperty({}, theme.breakpoints.up("lg"), generateItemWidth(props.lg))), props.xl && _defineProperty({}, theme.breakpoints.up("xl"), generateItemWidth(props.xl)));
    }
  };
});

var Grid = function Grid(props) {
  var _cx;

  var container = props.container,
      item = props.item,
      alignItems = props.alignItems,
      justify = props.justify,
      spacing = props.spacing,
      direction = props.direction,
      xs = props.xs,
      sm = props.sm,
      md = props.md,
      lg = props.lg,
      xl = props.xl,
      children = props.children,
      className = props.className,
      restProps = _objectWithoutProperties(props, _excluded);

  var classes = useStyles({
    spacing: normalizeSpacing(spacing),
    alignItems: alignItems,
    justify: justify,
    direction: direction,
    xs: xs,
    sm: sm,
    md: md,
    lg: lg,
    xl: xl
  });
  var gridClassName = cx((_cx = {}, _defineProperty(_cx, classes.base, true), _defineProperty(_cx, classes.container, container), _defineProperty(_cx, classes.item, item), _cx), className);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: gridClassName
  }, restProps), children);
};

Grid.propTypes = {
  spacing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])]),
  container: PropTypes.bool,
  item: PropTypes.bool,
  alignItems: PropTypes.oneOf(["flex-start", "center", "flex-end", "stretch", "baseline"]),
  justify: PropTypes.oneOf(["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"]),
  direction: PropTypes.oneOf(["row", "row-reverse", "column", "column-reverse"]),
  xs: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "auto"])]),
  sm: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "auto"])]),
  md: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "auto"])]),
  lg: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "auto"])]),
  xl: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "auto"])]),
  className: PropTypes.string
};
Grid.defaultProps = {};
export default Grid;