import _get from "lodash/get";
import React, { useCallback } from 'react';
import { connect } from "../../redux";
import { Col } from "@whalecloud/fdx";
import styled from "styled-components";
import Resizer from "../Resizer";
import ResizeHandle from "./ResizeHandle";
import { useHandlers } from "../../../hooks/useHandlers";
import { getElementWidthChildren, getActiveElement, getUi } from "../../selectors";
import { defaultCols, noGridTarget } from "../../../config/pluginConfig";
import previewDeviceConfig from "../../../config/previewDeviceConfig";
var PC = previewDeviceConfig.PC;
var ChildContainer = /*#__PURE__*/styled(Col, {
  target: "e5asyvd0",
  label: "ChildContainer"
})({
  position: "relative",
  display: "flex"
});
var CommonContainer = /*#__PURE__*/styled("div", {
  target: "e5asyvd1",
  label: "CommonContainer"
})({
  position: "relative",
  minWidth: 200,
  alignSelf: 'baseline',
  display: 'table'
});
var ButtonContainer = /*#__PURE__*/styled("div", {
  target: "e5asyvd2",
  label: "ButtonContainer"
})({
  position: 'relative',
  width: 'auto',
  alignSelf: 'baseline',
  display: 'table'
});
var BlockChild = /*#__PURE__*/React.memo(function (props) {
  var _element$data, _element$data$setting;

  var index = props.index,
      onResize = props.onResize,
      element = props.element,
      children = props.children,
      active = props.active,
      onResizeStop = props.onResizeStop,
      resizingCols = props.resizingCols,
      previewDevice = props.previewDevice;

  if (noGridTarget.includes(element === null || element === void 0 ? void 0 : element.type)) {
    return ['if'].includes(element.type) ? /*#__PURE__*/React.createElement(CommonContainer, null, children) : /*#__PURE__*/React.createElement(ButtonContainer, null, children);
  }

  var calculateCols = useCallback(function () {
    var colProps = {};
    var cols = _get(element.data, "settings.cols") || defaultCols;
    var _cols$span = cols.span,
        span = _cols$span === void 0 ? 24 : _cols$span,
        _cols$offset = cols.offset,
        offset = _cols$offset === void 0 ? 0 : _cols$offset;
    var resizingSpan = resizingCols.span,
        resizingOffset = resizingCols.offset,
        childIndex = resizingCols.index;
    var childSpan = resizingSpan && !isNaN(resizingSpan) && childIndex === index ? resizingSpan : span;
    var childOffset = (resizingOffset === 0 || resizingOffset && !isNaN(resizingOffset)) && index === 0 ? resizingOffset : offset;
    colProps.span = childSpan;
    colProps.offset = childOffset;
    colProps.xs = 24;
    colProps.sm = 24;
    colProps.md = 24;
    var isDesktop = previewDevice === PC;
    colProps.lg = isDesktop ? colProps.span : 24;
    colProps.xl = isDesktop ? colProps.span : 24;
    colProps.xxl = isDesktop ? colProps.span : 24;
    return colProps;
  }, [(_element$data = element.data) === null || _element$data === void 0 ? void 0 : (_element$data$setting = _element$data.settings) === null || _element$data$setting === void 0 ? void 0 : _element$data$setting.cols, resizingCols]);
  var resize = useCallback(function (pointX, position) {
    return onResize(pointX, position);
  }, [onResize]);

  var _useHandlers = useHandlers(props, {
    resizeStart: function resizeStart(_ref) {
      var onResizeStart = _ref.onResizeStart,
          element = _ref.element,
          i = _ref.index;
      return function () {
        onResizeStart(element, i);
      };
    }
  }),
      resizeStart = _useHandlers.resizeStart;

  return /*#__PURE__*/React.createElement(ChildContainer, calculateCols(), children, /*#__PURE__*/React.createElement(Resizer, {
    axis: "x",
    onResizeStart: resizeStart,
    onResizeStop: onResizeStop,
    onResize: function onResize(point) {
      resize(point, 'right');
    }
  }, function (resizeProps) {
    return /*#__PURE__*/React.createElement(ResizeHandle, Object.assign({
      position: "right",
      active: active
    }, resizeProps));
  }));
});

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    dropElement: function dropElement(payload) {
      dispatch({
        type: 'appBuilder/dropElement',
        payload: payload
      });
    }
  };
};

export default connect(function (state, _ref2) {
  var _element$elements;

  var id = _ref2.id;
  var ui = getUi(state);
  var activeElement = getActiveElement(state);
  var element = getElementWidthChildren(state, id);
  return {
    active: (activeElement === null || activeElement === void 0 ? void 0 : activeElement.id) === id,
    element: ((_element$elements = element.elements) === null || _element$elements === void 0 ? void 0 : _element$elements.length) > 0 ? getElementWidthChildren(state, element.id) : element,
    previewDevice: ui.previewDevice
  };
}, mapDispatchToProps)(BlockChild);
//# sourceMappingURL=Resizer.js.map