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

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

var Center = function Center(props) {
  var type = props.type,
      children = props.children,
      highlight = props.highlight,
      _props$minHeight = props.minHeight,
      minHeight = _props$minHeight === void 0 ? 170 : _props$minHeight;
  var handleDrop = useHandler(props, function (_ref2) {
    var dropElement = _ref2.dropElement,
        onDrop = _ref2.onDrop,
        id = _ref2.id,
        type = _ref2.type,
        path = _ref2.path;
    return function (source) {
      if (onDrop) {
        onDrop(source);
      } else if (path) {
        dropElement({
          source: source,
          target: {
            id: id,
            path: path,
            type: type,
            position: null
          }
        });
      }
    };
  });
  return /*#__PURE__*/React.createElement(Droppable, {
    directions: ['center'],
    onDrop: handleDrop,
    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, {
      isOver: isOver,
      highlight: highlight,
      minHeight: minHeight
    }, 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)));
  });
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    dropElement: function dropElement(payload) {
      dispatch({
        type: 'appBuilder/dropElement',
        payload: payload
      });
    }
  };
};

export default connect(null, mapDispatchToProps)( /*#__PURE__*/React.memo(Center));
//# sourceMappingURL=Center.js.map