"use strict";

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

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

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

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 _renderUi = require("../render-ui");

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) { (0, _defineProperty2["default"])(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; }

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,
      isCategorize = props.isCategorize,
      isVerticalPool = props.isVerticalPool,
      minHeight = props.minHeight;
  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, ")");
  } // The "type" is only sent through placement-ordering / placeholder
  // It can be "choice" or "target"
  // We apply a different style for the "choice" type
  // For any other type, use a dashed black border and a white fill


  if (type === 'choice') {
    style.border = "1px solid ".concat(_renderUi.color.borderLight());
    style.background = _renderUi.color.backgroundDark();
  }

  var boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: _objectSpread(_objectSpread({}, style), {}, {
      minHeight: minHeight
    }),
    className: (0, _classnames["default"])(classes.noSelectStyles, choiceBoard ? boardStyle : names, isVerticalPool && classes.verticalPool)
  }, 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,
  isCategorize: _propTypes["default"].bool,
  isVerticalPool: _propTypes["default"].bool,
  minHeight: _propTypes["default"].number
};

var styles = function styles(theme) {
  return {
    noSelectStyles: {
      WebkitTouchCallout: 'none',
      WebkitUserSelect: 'none',
      KhtmlUserSelect: 'none',
      MozUserSelect: 'none',
      MsUserSelect: 'none',
      userSelect: 'none'
    },
    placeholder: {
      width: '100%',
      height: '100%',
      background: _renderUi.color.white(),
      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,
      border: "2px dashed ".concat(_renderUi.color.black())
    },
    disabled: {
      boxShadow: 'none',
      background: theme.palette.background.paper
    },
    over: {
      border: "1px solid ".concat(_grey["default"][500]),
      backgroundColor: "".concat(_grey["default"][300])
    },
    board: {
      padding: theme.spacing.unit,
      display: 'flex',
      flexWrap: 'wrap',
      alignItems: 'center',
      minHeight: '100px',
      justifyContent: 'center',
      overflow: 'hidden',
      touchAction: 'none',
      backgroundColor: _renderUi.color.backgroundDark()
    },
    categorizeBoard: {
      padding: theme.spacing.unit / 2,
      display: 'flex',
      flexWrap: 'wrap',
      alignItems: 'center',
      minHeight: '100px',
      justifyContent: 'center',
      overflow: 'hidden',
      touchAction: 'none',
      backgroundColor: _renderUi.color.backgroundDark()
    },
    verticalPool: {
      display: 'flex',
      flexFlow: 'column wrap'
    }
  };
};

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

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