import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _isEqual from "lodash/isEqual";
import React from 'react';
import { css } from 'emotion';
import { connect } from "../../../redux";
import { Row } from '@whalecloud/fdx';
import { getElementWithChildren } from "../../../selectors";
import { ResizeArea, Resizer, resizeHandler } from "../../../components/Resize";
import DropChild from "../../../components/DropChild";
var innerElement = /*#__PURE__*/css({
  display: 'block',
  position: 'relative',
  boxSizing: 'border-box'
}, "label:innerElement;");

var RowContainer = function RowContainer(props) {
  var element = props.element,
      resizeStart = props.resizeStart,
      resizeStop = props.resizeStop,
      updateElement = props.updateElement;
  var id = element.id,
      path = element.path,
      type = element.type,
      elements = element.elements,
      _element$data = element.data,
      data = _element$data === void 0 ? {} : _element$data;

  var _ref = data || {},
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? "" : _ref$className;

  var _resizeHandler = resizeHandler({
    element: element,
    resizeStart: resizeStart,
    resizeStop: resizeStop,
    updateElement: updateElement
  }),
      refChildren = _resizeHandler.refChildren,
      resizing = _resizeHandler.resizing,
      restResizProps = _objectWithoutProperties(_resizeHandler, ["refChildren", "resizing"]);

  var directions = ['top'];

  if (elements.length < 4) {
    directions.push.apply(directions, ['left', 'right']);
  }

  return /*#__PURE__*/React.createElement(Row, {
    className: "".concat(innerElement, " ").concat(className)
  }, /*#__PURE__*/React.createElement(ResizeArea, {
    refChildren: refChildren,
    resizing: resizing
  }), elements.map(function (child, index) {
    var last = index === elements.length - 1;
    return /*#__PURE__*/React.createElement(Resizer, Object.assign({
      key: child.id,
      id: child.id,
      index: index,
      resizing: resizing
    }, restResizProps), /*#__PURE__*/React.createElement(DropChild, {
      directions: directions,
      childId: child.id,
      childType: child.type,
      type: type,
      id: id,
      index: index,
      count: elements.length,
      last: last
    }));
  }));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    dropElement: function dropElement(payload) {
      dispatch({
        type: 'appBuilder/dropElement',
        payload: payload
      });
    },
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    },
    resizeStart: function resizeStart() {
      dispatch({
        type: 'ui/resizeStart'
      });
    },
    resizeStop: function resizeStop() {
      dispatch({
        type: 'ui/resizeStop'
      });
    }
  };
};

export default connect(function (state, props) {
  var element = getElementWithChildren(state, props.elementId);
  return {
    element: element
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})( /*#__PURE__*/React.memo(RowContainer));
//# sourceMappingURL=RowContainer.js.map