import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import * as React from "react";
import { Transition } from "react-transition-group"; // import isEqual from "lodash/isEqual";
// import { connect } from "@whalecloud/page-builder/editor/redux";

import { useHandler } from "../../../hooks/useHandler";
import { defaultStyle, ElementContainer, transitionStyles, readOnlyStyles } from "./ElementStyled";

var Element = function Element(props) {
  var element = props.element,
      renderedPlugin = props.renderedPlugin,
      _props$className = props.className,
      className = _props$className === void 0 ? "" : _props$className,
      _props$containerClass = props.containerClassName,
      containerClassName = _props$containerClass === void 0 ? "" : _props$containerClass;
  var onClick = useHandler(props, function (_ref) {
    var element = _ref.element;
    return function () {};
  });
  return /*#__PURE__*/React.createElement(Transition, {
    in: true,
    timeout: 250,
    appear: true
  }, function (state) {
    return /*#__PURE__*/React.createElement(ElementContainer, {
      id: element.id,
      style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]), readOnlyStyles),
      className: "webiny-pb-page-element-container webiny-pb-block-element-container ".concat(containerClassName)
    }, /*#__PURE__*/React.createElement("div", {
      className: ["innerWrapper", className].filter(function (c) {
        return c;
      }).join(" ")
    }, renderedPlugin));
  });
}; // export default connect<any, any, any>(
//     (state, props) => {
//         return {
//             ...getElementProps(state, props),
//             element: getElement(state, props.id)
//         };
//     },
//     null,
//     null,
//     { areStatePropsEqual: isEqual }
// )(React.memo(Element));


export default /*#__PURE__*/React.memo(Element);
//# sourceMappingURL=ElementReadOnly.js.map