import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React from "react";
import { i18n } from '@fishx/i18n';
import { getPlugins } from "../../../../plugins";
import { ELEMENT_CREATED } from "../../../actions";
import { ReactComponent as ImageIcon } from "@svgr/webpack!./round-image-24px.svg";
import ImageSettings from "./ImageSettings";
import Image from "./Image";
import Action from "../../elementSettings/components/Action";
import { PreviewBox } from "../../../utils";
import { defaultTarget } from "../../../../config/pluginConfig";
export default (function () {
  return [{
    name: "pb-editor-page-element-image",
    type: "pb-editor-page-element",
    elementType: "image",
    toolbar: {
      title: i18n('PAGEBUIDER_SETTINGS_IMAGE'),
      group: "pb-editor-element-group-basic",
      toolBarPreview: /*#__PURE__*/React.createElement(ImageIcon, null),
      preview: function preview() {
        return /*#__PURE__*/React.createElement(PreviewBox, null, /*#__PURE__*/React.createElement(ImageIcon, null));
      }
    },
    settings: ["pb-editor-page-element-settings-style"],
    target: defaultTarget,
    create: function create(options) {
      return _objectSpread({
        type: "image",
        elements: [],
        data: {
          settings: {}
        }
      }, options);
    },
    render: function render(_ref) {
      var element = _ref.element;
      return /*#__PURE__*/React.createElement(Image, {
        element: element
      });
    }
  }, {
    name: "pb-editor-page-element-settings-image",
    type: "pb-editor-page-element-settings",
    renderAction: function renderAction() {
      return /*#__PURE__*/React.createElement(Action, {
        plugin: this.name,
        tooltip: "Image",
        icon: /*#__PURE__*/React.createElement(ImageIcon, null)
      });
    },
    renderMenu: function renderMenu() {
      return /*#__PURE__*/React.createElement(ImageSettings, null);
    }
  }, {
    type: "pb-editor-redux-middleware",
    name: "pb-editor-redux-middleware-image-created",
    actions: [ELEMENT_CREATED],
    middleware: function middleware(_ref2) {
      var action = _ref2.action,
          next = _ref2.next;
      var _action$payload = action.payload,
          element = _action$payload.element,
          source = _action$payload.source;
      next(action);

      if (element.type !== "image") {
        return;
      } // Check the source of the element (could be `saved` element which behaves differently from other elements)


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

      if (!imagePlugin) {
        return;
      }

      var onCreate = imagePlugin.onCreate;

      if (!onCreate || onCreate !== "skip") {
        // If source element does not define a specific `onCreate` behavior - continue with the actual element plugin
        // TODO: this isn't an ideal approach, implement a retry mechanism which polls for DOM element
        setTimeout(function () {
          var image = document.querySelector("#".concat(window.CSS.escape(element.id), " [data-role=\"select-image\"]"));

          if (image) {
            image.click();
          }
        }, 100);
      }
    }
  }];
});
//# sourceMappingURL=index.js.map