import * as React from "react";
import styled from "styled-components";
import { getElementProps } from "../../selectors";
import { connect } from "../../redux";
import Droppable from "./../Droppable";
var Container = /*#__PURE__*/React.memo(
/*#__PURE__*/
// @ts-ignore
styled("div", {
  target: "ea8mpej0",
  label: "Container"
})(function (_ref) {
  var isOver = _ref.isOver;
  return {
    backgroundColor: "transparent",
    boxSizing: "border-box",
    height: "100%",
    minHeight: 31,
    position: "relative",
    userSelect: "none",
    width: "100%",
    border: isOver ? "1px dashed var(--mdc-theme-primary)" : "1px dashed var(--mdc-theme-secondary)",
    ".addIcon": {
      color: isOver ? "var(--mdc-theme-primary) !important" : "var(--mdc-theme-secondary) !important"
    }
  };
}));
var AddText = /*#__PURE__*/styled("div", {
  target: "ea8mpej1",
  label: "AddText"
})({
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%,-50%)",
  margin: 0,
  width: '100%',
  textAlign: 'center'
});
var Add = /*#__PURE__*/styled("div", {
  target: "ea8mpej2",
  label: "Add"
})({
  margin: 0,
  width: '100%',
  textAlign: 'center'
});

var isVisible = function isVisible() {
  return true;
};

var Center = function Center(_ref2) {
  var type = _ref2.type,
      onDrop = _ref2.onDrop,
      children = _ref2.children,
      className = _ref2.className;
  return /*#__PURE__*/React.createElement(Droppable, {
    directions: ['center'],
    onDrop: onDrop,
    type: type,
    isVisible: isVisible
  }, function (_ref3) {
    var _children$props;

    var isOver = _ref3.isOver,
        drop = _ref3.drop;
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: "100%",
        height: "100%"
      },
      ref: drop
    }, /*#__PURE__*/React.createElement(Container, {
      className: className,
      isOver: isOver
    }, typeof (children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children) === 'string' ? /*#__PURE__*/React.createElement(AddText, null, children) : /*#__PURE__*/React.createElement(Add, null, children)));
  });
};

export default connect(function (state, props) {
  return getElementProps(state, props);
})( /*#__PURE__*/React.memo(Center));
//# sourceMappingURL=PlaceHolder.js.map