import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _get from "lodash/get";
import React, { useState } from "react";
import { css } from "emotion";
import styled from "styled-components";
import { set } from "dot-prop-immutable";
import { useHandlers } from "../../../../hooks/useHandlers";
import { connect } from "../../../redux";
import Resizer from "../../../components/Resizer";
import { getElement } from "../../../selectors";
var SpacerHandle = /*#__PURE__*/styled("div", {
  target: "e101g7ww0",
  label: "SpacerHandle"
})({
  height: "100%",
  width: "100%",
  position: "absolute",
  left: 0,
  bottom: -8
});
var SpacerHeight = /*#__PURE__*/styled("div", {
  target: "e101g7ww1",
  label: "SpacerHeight"
})({
  position: "absolute",
  width: 50,
  top: "calc(50% - 12px)",
  left: "calc(50% - 25px)",
  color: "white",
  fontSize: 12,
  padding: 5,
  borderRadius: 5
});
export var MIN_HEIGHT = 20;
export var INIT_HEIGHT = 100;

var SpacerContainer = function SpacerContainer(props) {
  var elementStyle = props.elementStyle,
      customClasses = props.customClasses,
      combineClassNames = props.combineClassNames,
      element = props.element;

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      localHeight = _useState2[0],
      setHeight = _useState2[1];

  var _elementStyle$initial = elementStyle.initialHeight,
      initialHeight = _elementStyle$initial === void 0 ? MIN_HEIGHT : _elementStyle$initial,
      spacerStyle = _objectWithoutProperties(elementStyle, ["initialHeight"]);

  var height = initialHeight;

  if (localHeight) {
    height = localHeight;
  }

  var _useHandlers = useHandlers(props, {
    onResizeStart: function onResizeStart(_ref) {
      var element = _ref.element,
          resizeStart = _ref.resizeStart;
      return function () {
        resizeStart();
        setHeight(_get(element, "data.settings.height.value", MIN_HEIGHT));
      };
    },
    onResizeStop: function onResizeStop(_ref2) {
      var updateElement = _ref2.updateElement,
          element = _ref2.element,
          resizeStop = _ref2.resizeStop;
      return function () {
        resizeStop();
        updateElement({
          element: set(element, "data.settings.height.value", localHeight)
        });
        setHeight(null);
      };
    },
    onResize: function onResize() {
      return function (diff) {
        setHeight(Math.max(MIN_HEIGHT, localHeight - diff));
      };
    }
  }),
      onResizeStart = _useHandlers.onResizeStart,
      onResizeStop = _useHandlers.onResizeStop,
      onResize = _useHandlers.onResize;

  var _element$data = element.data,
      data = _element$data === void 0 ? {} : _element$data;
  var _data$className = data.className,
      className = _data$className === void 0 ? '' : _data$className;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      minHeight: height
    },
    className: combineClassNames.apply(void 0, [/*#__PURE__*/css(spacerStyle, "label:SpacerContainer;")].concat(_toConsumableArray(customClasses), [className]))
  }, /*#__PURE__*/React.createElement(Resizer, {
    axis: "y",
    onResizeStart: onResizeStart,
    onResizeStop: onResizeStop,
    onResize: onResize
  }, function (_ref3) {
    var otherProps = Object.assign({}, _ref3);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpacerHeight, null), /*#__PURE__*/React.createElement(SpacerHandle, otherProps));
  }));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    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) {
  return {
    element: getElement(state, props.elementId)
  };
}, mapDispatchToProps)(SpacerContainer);
//# sourceMappingURL=SpacerContainer.js.map