import React from "react";
import styled from "styled-components";
import { keyframes } from "emotion";
import { i18n } from '@fishx/i18n';
import { connect } from "../../redux";
import { Elevation } from "@webiny/ui/Elevation";
import { ButtonFloating } from "@webiny/ui/Button";
import { getContent, getPage } from "../../selectors";
import { ReactComponent as AddIcon } from "@svgr/webpack!../../assets/icons/add.svg";
var pulse = /*#__PURE__*/keyframes("0%{box-shadow:0 0 0 0 rgba(68,119,238,0.4);}70%{box-shadow:0 0 0 30px rgba(68,119,238,0);}100%{box-shadow:0 0 0 0 rgba(68,119,238,0);}label:pulse;");
var AddBlockContainer = /*#__PURE__*/styled("div", {
  target: "e12gisg30",
  label: "AddBlockContainer"
})({
  position: "absolute",
  zIndex: 11,
  top: "50%",
  left: "50%",
  transform: "translate(-50%,-50%)",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  width: "150px",
  height: "100px",
  borderRadius: 2,
  color: "var(--mdc-theme-on-surface)"
});
var AddBlockContent = /*#__PURE__*/styled("div", {
  target: "e12gisg31",
  label: "AddBlockContent"
})({
  width: 350,
  margin: 5,
  fontSize: 15,
  color: '#000'
});
var NoteStyle = /*#__PURE__*/styled("div", {
  target: "e12gisg32",
  label: "NoteStyle"
})({
  fontSize: 12,
  marginTop: 35,
  color: 'rgba(0,0,0,.45)'
});
var TitleStyle = /*#__PURE__*/styled("div", {
  target: "e12gisg33",
  label: "TitleStyle"
})({
  textAlign: 'center'
});

var AddContent = function AddContent(_ref) {
  var count = _ref.count,
      hasContent = _ref.hasContent,
      togglePlugin = _ref.togglePlugin;

  if (count || hasContent) {
    return null;
  }

  return /*#__PURE__*/React.createElement(AddBlockContainer, {
    "data-type": "container"
  }, /*#__PURE__*/React.createElement(Elevation, {
    z: 4,
    style: {
      backgroundColor: "var(--mdc-theme-surface)",
      padding: "30px 20px 6px",
      // transform: "translateY(-50%)",
      borderRadius: 2
    }
  }, /*#__PURE__*/React.createElement(AddBlockContent, null, /*#__PURE__*/React.createElement(TitleStyle, null, i18n('PAGEBUIDER_COMPONENT_ADD_TIPS')), /*#__PURE__*/React.createElement(TitleStyle, {
    style: {
      marginLeft: -12
    }
  }, i18n('PAGEBUIDER_COMPONENT_ADD_TIPS_CLICK'), /*#__PURE__*/React.createElement(ButtonFloating, {
    "data-testid": "pb-content-add-block-button",
    style: {
      background: '#4477EE',
      animation: pulse + " 3s ease infinite",
      margin: "0 10px"
    },
    small: true,
    icon: /*#__PURE__*/React.createElement(AddIcon, null) // onClick={() => togglePlugin({ name: "pb-editor-search-blocks-bar" })}
    ,
    onClick: function onClick() {
      return togglePlugin({
        name: "add-block"
      });
    }
  }), i18n('PAGEBUIDER_COMPONENT_ADD_TIPS_ADD')), /*#__PURE__*/React.createElement(NoteStyle, null, /*#__PURE__*/React.createElement("p", null, i18n('PAGEBUIDER_COMPONENT_ADD_NOTE_TITLE')), /*#__PURE__*/React.createElement("p", null, i18n('PAGEBUIDER_COMPONENT_ADD_NOTE_CON_ONE')), /*#__PURE__*/React.createElement("p", null, i18n('PAGEBUIDER_COMPONENT_ADD_NOTE_CON_TWO')), /*#__PURE__*/React.createElement("p", null, i18n('PAGEBUIDER_COMPONENT_ADD_NOTE_CON_THERE'))))));
};

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

export default connect(function (state) {
  var page = getPage(state);
  return {
    count: getContent(state).elements.length,
    hasContent: page.content && Object.keys(page.content).length > 0
  };
}, // {
//     togglePlugin
// }
mapDispatchToProps)( /*#__PURE__*/React.memo(AddContent));
//# sourceMappingURL=AddContent.js.map