import React, { useEffect } from "react";
import { connect } from "../../redux";
import styled from "styled-components";
import { css } from "emotion";
import { getPlugins } from "../../../plugins";
import Element from "../Element";
import { Elevation } from "@webiny/ui/Elevation";
import { renderPlugins } from "../../../plugins";
import { getActivePlugins } from "../../selectors";
import previewDeviceConfig from "../../../config/previewDeviceConfig";
var PC = previewDeviceConfig.PC;
var ContentContainer = /*#__PURE__*/styled("div", {
  target: "e1mus3tm0",
  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 TopButton = /*#__PURE__*/css({
  height: '24px !important',
  '.mdc-icon-button': {
    // height: '24px !important',
    paddingTop: 0,
    paddingBottom: 0,
    fontSize: 15,
    float: 'left',
    svg: {
      color: '#a0aec0',
      fill: 'currentColor'
    },
    "&:hover svg": {
      color: '#00ccb0'
    },
    "&:before,&:after": {
      display: 'none'
    },
    '+ span': {
      display: 'none'
    }
  }
}, "label:TopButton;");
var splitLine = /*#__PURE__*/css({
  width: 1,
  height: 16,
  background: '#a6a6a6',
  display: 'inline-block',
  margin: '4px 2px'
}, "label:splitLine;");

var renderPlugin = function renderPlugin(plugin) {
  return /*#__PURE__*/React.cloneElement(plugin.renderAction(), {
    key: plugin.name
  });
};

var Content = function Content(_ref) {
  var rootElement = _ref.rootElement,
      renderLayout = _ref.renderLayout,
      layout = _ref.layout,
      _ref$save = _ref.save,
      save = _ref$save === void 0 ? function () {} : _ref$save,
      buildMode = _ref.buildMode,
      clearPlugins = _ref.clearPlugins,
      addon = _ref.addon;
  var actionsTop = getPlugins("pb-editor-toolbar-previews");
  var actionsBottom = getPlugins("pb-editor-toolbar-bottom");
  var actionsSwitch = getPlugins("pb-switch-toolbar-preview");
  var actionsMobile = actionsSwitch.filter(function (v) {
    return v.name === 'pb-switch-toolbar-mobile';
  });
  var actionsSwitchBtn = buildMode && buildMode !== PC ? actionsMobile : actionsSwitch;
  var layouts = React.useMemo(function () {
    var plugins = getPlugins("pb-page-layout");
    return plugins.map(function (pl) {
      return pl.layout;
    });
  }, []);
  var themeLayout = layouts.find(function (l) {
    return l.name === layout;
  });

  if (renderLayout && !themeLayout) {
    return /*#__PURE__*/React.createElement("div", {
      className: "hidden"
    }, "Layout \"", layout, "\" was not found in your theme!");
  }

  var content;

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

  content = renderLayout ? /*#__PURE__*/React.createElement(themeLayout.component, null, content) : content;
  useEffect(function () {
    // 组件销毁时，清空组件设置
    return function () {
      clearPlugins();
    };
  }, []);
  return /*#__PURE__*/React.createElement(Elevation, {
    className: "".concat(contentContainerWrapper, " border-0 border-b border-solid border-gray-300 shadow-none overflow-hidden"),
    z: 2
  }, /*#__PURE__*/React.createElement(ContentContainer, {
    className: "h-full"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex w-full justify-between"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex h-6 overflow-hidden"
  }, /*#__PURE__*/React.createElement("div", {
    className: TopButton
  }, actionsBottom.map(renderPlugin)), /*#__PURE__*/React.createElement("div", {
    className: "pagebuilder-bar-separate"
  }), /*#__PURE__*/React.createElement("div", {
    className: TopButton
  }, actionsSwitchBtn.map(renderPlugin)), /*#__PURE__*/React.createElement("div", {
    className: "pagebuilder-bar-separate"
  }), renderPlugins("pb-editor-default-bar-right", {
    save: save
  }), addon))));
};

var stateToProps = function stateToProps(state) {
  var _state$appBuilder, _state$appBuilder$con;

  return {
    buildMode: (_state$appBuilder = state.appBuilder) === null || _state$appBuilder === void 0 ? void 0 : (_state$appBuilder$con = _state$appBuilder.config) === null || _state$appBuilder$con === void 0 ? void 0 : _state$appBuilder$con.buildMode,
    activePluginsTop: getActivePlugins("pb-editor-toolbar-previews")(state).map(function (pl) {
      return pl.name;
    }),
    activePluginsBottom: getActivePlugins("pb-editor-toolbar-bottom")(state).map(function (pl) {
      return pl.name;
    }),
    activePluginsSwitch: getActivePlugins("pb-switch-toolbar-preview")(state).map(function (pl) {
      return pl.name;
    })
  };
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    clearPlugins: function clearPlugins() {
      dispatch({
        type: 'ui/clearToolbarPreview'
      });
    }
  };
};

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