import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React from "react";
import styled from "styled-components";
import { useDrop } from 'react-dnd';
import { ElementRoot } from "../../../../render/components/ElementRoot";
import BlockContainer from "./BlockContainer";
var BlockStyle = /*#__PURE__*/styled("div", {
  target: "ed2g59v0",
  label: "BlockStyle"
})({
  position: "relative",
  color: "#666",
  // padding: 5,
  boxSizing: "border-box"
});

var Block = function Block(_ref) {
  var buildMode = _ref.buildMode,
      element = _ref.element;
  var id = element.id;

  var _useDrop = useDrop({
    accept: 'formTableDrag',
    hover: function hover(item, monitor) {
      item.el = 'block';
      item.element = element;
    }
  }),
      _useDrop2 = _slicedToArray(_useDrop, 2),
      droper = _useDrop2[1];

  return /*#__PURE__*/React.createElement(BlockStyle, {
    ref: droper,
    id: id
  }, /*#__PURE__*/React.createElement(ElementRoot, {
    element: element
  }, function (_ref2) {
    var elementStyle = _ref2.elementStyle,
        elementAttributes = _ref2.elementAttributes,
        customClasses = _ref2.customClasses,
        combineClassNames = _ref2.combineClassNames;
    return /*#__PURE__*/React.createElement(BlockContainer, {
      elementId: id,
      buildMode: buildMode,
      elementStyle: elementStyle,
      elementAttributes: elementAttributes,
      containerClassName: "webiny-pb-layout-block-container",
      customClasses: ["webiny-pb-layout-block webiny-pb-base-page-element-style"].concat(_toConsumableArray(customClasses)),
      combineClassNames: combineClassNames
    });
  }));
};

export default /*#__PURE__*/React.memo(Block);
//# sourceMappingURL=Block.js.map