import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _isEqual from "lodash/isEqual";
import React, { useMemo } from "react";
import { connect } from "../../editor/redux";
import { Col } from '@whalecloud/fdx';
import { getPlugins } from "../../plugins";
import { getElementWithChildren, getUi } from "../selectors";
import tryRenderingPlugin from "./../../utils/tryRenderingPlugin";
import { getElementCols } from "../../utils/util";

var Element = function Element(props) {
  var element = props.element,
      nameSpace = props.nameSpace,
      initialData = props.initialData,
      forwardedRef = props.forwardedRef,
      save = props.save,
      previewDevice = props.previewDevice,
      updateElement = props.updateElement;
  var theme = useMemo(function () {
    return Object.assign.apply(Object, [{}].concat(_toConsumableArray(getPlugins("pb-theme").map(function (pl) {
      return pl.theme;
    }))));
  }, []);

  if (!element) {
    return null;
  }

  var plugin = getPlugins("pb-render-page-element").find(function (pl) {
    return pl.elementType === element.type;
  });

  if (!plugin) {
    return null;
  }

  var renderedPlugin = tryRenderingPlugin(function () {
    var _element$data;

    if ((_element$data = element.data) !== null && _element$data !== void 0 && _element$data.formSettings) {
      element.data.formSettings.nameSpace = nameSpace;
    }

    var render = plugin.render({
      theme: theme,
      element: element,
      nameSpace: nameSpace,
      initialData: initialData,
      forwardedRef: forwardedRef,
      save: save,
      previewDevice: previewDevice,
      updateElement: updateElement
    });

    if (element.type === 'document') {
      return render;
    }

    var colProps = getElementCols(element, previewDevice);

    if (element.type === 'button') {
      return render;
    } else return /*#__PURE__*/React.createElement(Col, colProps, render);
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedPlugin);
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateElement: function updateElement(payload, nameSpace) {
      dispatch({
        type: "".concat(nameSpace, "/updateAndFlattenElement"),
        payload: payload
      });
    }
  };
};

export default connect(function (state, _ref) {
  var element = _ref.element,
      nameSpace = _ref.nameSpace;
  var ui = getUi(state);
  return {
    element: getElementWithChildren(state, element.id, nameSpace),
    previewDevice: ui.previewDevice
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})(Element);
//# sourceMappingURL=Element.js.map