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: "exw1w1q0",
  label: "Container"
})(function (_ref) {
  var isOver = _ref.isOver,
      minWidth = _ref.minWidth;
  return {
    backgroundColor: "transparent",
    boxSizing: "border-box",
    height: "100%",
    // minHeight: 100,
    position: "relative",
    userSelect: "none",
    width: "100%",
    minWidth: minWidth,
    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 Add = /*#__PURE__*/styled("div", {
  target: "exw1w1q1",
  label: "Add"
})({
  // position: "absolute",
  // top: "50%",
  // left: "50%",
  // transform: "translate(-50%,-50%)",
  margin: 0
});

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

var TableCell = function TableCell(_ref2) {
  var type = _ref2.type,
      onDrop = _ref2.onDrop,
      children = _ref2.children,
      _ref2$minWidth = _ref2.minWidth,
      minWidth = _ref2$minWidth === void 0 ? 150 : _ref2$minWidth;
  return /*#__PURE__*/React.createElement(Droppable, {
    directions: ['center'],
    onDrop: onDrop,
    type: type,
    isVisible: isVisible
  }, function (_ref3) {
    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,
      minWidth: minWidth
    }, /*#__PURE__*/React.createElement(Add, null, children)));
  });
};

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