import React from "react";
import { connect } from "../../redux";
import styled from "styled-components";
import { css } from "emotion";
import { getPlugins } from "../../../plugins";
import { getContent, getUi } from "../../selectors";
import Element from "../Element";
import { Elevation } from "@webiny/ui/Elevation";
var WrapContainer = /*#__PURE__*/styled("div", {
  target: "essa4a90",
  label: "WrapContainer"
})({
  height: 'calc(100% - 24px)',
  "> div": {
    height: '100%'
  }
});
var OuterDiv = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "essa4a91",
  label: "OuterDiv"
})(function (_ref) {
  var previewDevice = _ref.previewDevice;
  var style = {};

  if (previewDevice === 'Mobile') {
    style = {
      backgroundColor: '#dbe5f0',
      padding: 20,
      textAlign: 'center',
      "> div": {
        width: 320,
        backgroundColor: '#fff',
        margin: '0 auto'
      }
    };
  } else if (previewDevice === 'Pad') {
    style = {
      backgroundColor: '#dbe5f0',
      padding: 20,
      textAlign: 'center',
      "> div": {
        width: 768,
        backgroundColor: '#fff',
        margin: '0 auto'
      }
    };
  }

  return style;
}));
var ContentContainer = /*#__PURE__*/styled("div", {
  target: "essa4a92",
  label: "ContentContainer"
})(function () {
  return {
    ".webiny-pb-page-document": {
      overflowY: "visible",
      // cuts off the block selector tooltip
      overflowX: "visible"
    }
  };
});
var contentContainerWrapper = /*#__PURE__*/css({
  boxSizing: "border-box",
  zIndex: 1
}, "label:contentContainerWrapper;");
var BaseContainer = /*#__PURE__*/styled("div", {
  target: "essa4a93",
  label: "BaseContainer"
})({
  width: "100%",
  height: "calc(100% - 18px)",
  margin: "0 auto",
  top: 18
});

var Content = function Content(_ref2) {
  var rootElement = _ref2.rootElement,
      previewDevice = _ref2.previewDevice;
  var plugins = getPlugins("pb-editor-content");
  var content;

  if (rootElement && rootElement.id) {
    content = /*#__PURE__*/React.createElement(Element, {
      containerClassName: "h-full",
      id: rootElement.id
    });
  }

  return /*#__PURE__*/React.createElement(WrapContainer, null, /*#__PURE__*/React.createElement(OuterDiv, {
    previewDevice: previewDevice
  }, /*#__PURE__*/React.createElement(Elevation, {
    className: "".concat(contentContainerWrapper, " pagebuilder-design-area w-full h-full overflow-auto"),
    z: 2
  }, /*#__PURE__*/React.createElement(ContentContainer, {
    className: "h-full"
  }, /*#__PURE__*/React.createElement("div", null, plugins.map(function (plugin) {
    return /*#__PURE__*/React.cloneElement(plugin.render(), {
      key: plugin.name
    });
  })), /*#__PURE__*/React.createElement(BaseContainer, {
    className: "webiny-pb-editor-content-preview relative"
  }, content)))));
};

var stateToProps = function stateToProps(state) {
  var ui = getUi(state);
  return {
    rootElement: state.appBuilder.elements ? state.appBuilder.elements[getContent(state).id] : {},
    previewDevice: ui.previewDevice
  };
};

export default connect(stateToProps, null)(Content);
//# sourceMappingURL=Content.js.map