import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React from "react";
import styled from 'styled-components';
var commonStyle = {
  position: "absolute",
  zIndex: 20,
  borderRadius: 5,
  background: "var(--mdc-theme-primary)"
};
var TopLine = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "eypvbp40",
  label: "TopLine"
})(function (_ref) {
  var width = _ref.width,
      left = _ref.left;
  return _objectSpread(_objectSpread({}, commonStyle), {}, {
    width: width || '100%',
    height: '3px',
    top: -3,
    left: left || 0
  });
}));
var BottomLine = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "eypvbp41",
  label: "BottomLine"
})(function (_ref2) {
  var width = _ref2.width,
      left = _ref2.left;
  return _objectSpread(_objectSpread({}, commonStyle), {}, {
    width: width || '100%',
    height: '3px',
    bottom: -3,
    left: left || 0
  });
}));
var LeftLine = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "eypvbp42",
  label: "LeftLine"
})(_objectSpread(_objectSpread({}, commonStyle), {}, {
  width: "3px",
  height: '100%',
  top: 0,
  bottom: 0,
  left: 0
})));
var RightLine = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "eypvbp43",
  label: "RightLine"
})(_objectSpread(_objectSpread({}, commonStyle), {}, {
  width: "3px",
  height: '100%',
  top: 0,
  bottom: 0,
  right: 0
})));

var LineRender = function LineRender(_ref3) {
  var direction = _ref3.direction,
      rect = _ref3.rect;

  if (['top', 'bottom'].includes(direction)) {
    var parentRect = document.getElementsByClassName("webiny-pb-page-document")[0].getBoundingClientRect();
    var left = rect.left - parentRect.left > 20 ? -(rect.left - parentRect.left - 20) : 0;

    if (direction === 'top') {
      return /*#__PURE__*/React.createElement(TopLine, {
        width: parentRect.width - 28,
        left: left
      });
    }

    return /*#__PURE__*/React.createElement(BottomLine, {
      width: parentRect.width - 28,
      left: left
    });
  }

  if (direction === 'left') {
    return /*#__PURE__*/React.createElement(LeftLine, null);
  }

  if (direction === 'right') {
    return /*#__PURE__*/React.createElement(RightLine, null);
  }

  return null;
};

export default /*#__PURE__*/React.memo(LineRender, function (prev, next) {
  if (prev.id === next.id && prev.direction === next.direction) {
    return true;
  }

  return false;
}); // export default React.memo(LineRender)
//# sourceMappingURL=LineRender.js.map