import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useState } from 'react';
import { connect } from "../../../redux";
import cloneDeep from 'lodash/cloneDeep';
import { getActiveElementId, getElementWithChildren } from "../../../selectors";
import createElementPlugin from "../../../components/PluginsLoader/createElementsPlugin";
import SaveDialog from "./SaveDialog";

var removeIdsAndPaths = function removeIdsAndPaths(el) {
  delete el.id;
  delete el.path;
  el.elements = el.elements && el.elements.map(function (el) {
    delete el.id;
    delete el.path;

    if (el.elements && el.elements.length) {
      el = removeIdsAndPaths(el);
    }

    return el;
  });
  return el;
};

var SaveAction = function SaveAction(props) {
  var children = props.children,
      element = props.element,
      save = props.save,
      togglePlugin = props.togglePlugin;

  if (!element) {
    return null;
  }

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isDialogOpened = _useState2[0],
      setOpenDialog = _useState2[1];

  var showDialog = useCallback(function () {
    return setOpenDialog(true);
  }, []);
  var hideDialog = useCallback(function () {
    return setOpenDialog(false);
  }, []);

  var onSubmit = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formData) {
      var data, savePlugin;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              data = cloneDeep(formData);
              data.content = JSON.stringify(removeIdsAndPaths(cloneDeep(element)));

              if (save) {
                save(data);
              }

              hideDialog();
              savePlugin = createElementPlugin(data);
              togglePlugin({
                name: savePlugin.name
              });

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onSubmit(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SaveDialog, {
    key: element.id,
    element: element,
    open: isDialogOpened,
    onClose: hideDialog,
    onSubmit: onSubmit,
    type: element.type === 'block' ? 'block' : 'element'
  }), /*#__PURE__*/React.cloneElement(children, {
    onClick: showDialog
  }));
};

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

export default connect(function (state) {
  var _state$appBuilder, _state$appBuilder$con;

  return {
    element: getElementWithChildren(state, getActiveElementId(state)),
    save: (_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.save
  };
}, mapDispatchToProps)(SaveAction);
//# sourceMappingURL=SaveAction.js.map