"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.PlaceHolder = void 0;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@material-ui/core/styles");

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));

var PlaceHolder = function PlaceHolder(props) {
  var children = props.children,
      classes = props.classes,
      className = props.className,
      isOver = props.isOver,
      type = props.type,
      grid = props.grid,
      disabled = props.disabled,
      choiceBoard = props.choiceBoard;
  var names = (0, _classnames["default"])(classes.placeholder, disabled && classes.disabled, isOver && classes.over, classes[type], className);
  var style = {};

  if (grid && grid.columns) {
    style.gridTemplateColumns = "repeat(".concat(grid.columns, ", 1fr)");
  }

  if (grid && grid.rows) {
    var repeatValue = grid.rowsRepeatValue || '1fr';
    style.gridTemplateRows = "repeat(".concat(grid.rows, ", ").concat(repeatValue, ")");
  }

  return /*#__PURE__*/_react["default"].createElement("div", {
    style: style,
    className: choiceBoard ? classes.board : names
  }, children);
};

exports.PlaceHolder = PlaceHolder;
PlaceHolder.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  choiceBoard: _propTypes["default"].bool,
  grid: _propTypes["default"].shape({
    columns: _propTypes["default"].number,
    rows: _propTypes["default"].number,
    // if a different value then 1fr is wanted
    rowsRepeatValue: _propTypes["default"].string
  }),
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
  className: _propTypes["default"].string,
  isOver: _propTypes["default"].bool,
  index: _propTypes["default"].number,
  type: _propTypes["default"].string,
  disabled: _propTypes["default"].bool
};

var styles = function styles(theme) {
  return {
    placeholder: {
      width: '100%',
      height: '100%',
      background: theme.palette.grey[200],
      border: '1px solid #D1D1D1',
      transition: 'background-color 200ms linear, border-color 200ms linear',
      boxSizing: 'border-box',
      display: 'grid',
      gridRowGap: "".concat(theme.spacing.unit, "px"),
      gridColumnGap: "".concat(theme.spacing.unit, "px"),
      padding: theme.spacing.unit * 1
    },
    disabled: {
      boxShadow: 'none',
      background: theme.palette.background.paper
    },
    over: {
      border: "1px solid ".concat(_grey["default"][500]),
      backgroundColor: "".concat(_grey["default"][300])
    },
    board: {
      border: '1px solid #D1D1D1',
      padding: theme.spacing.unit,
      display: 'flex',
      flexWrap: 'wrap',
      alignItems: 'center',
      minHeight: '200px',
      justifyContent: 'center',
      overflow: 'hidden',
      touchAction: 'none'
    }
  };
};

var _default = (0, _styles.withStyles)(styles)(PlaceHolder);

exports["default"] = _default;
//# sourceMappingURL=placeholder.js.map