import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { PureComponent } from 'react';
import './index.scss';

var UndoRedo = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(UndoRedo, _PureComponent);

  function UndoRedo(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;
    _this.history = void 0;

    _this.handleHistoryChange = function (history) {
      var _this$history;

      _this.history = history;

      _this.updateState(((_this$history = _this.history) === null || _this$history === void 0 ? void 0 : _this$history.getState()) || 0);
    };

    _this.init = function () {
      var _editor$get, _this$history2;

      var editor = _this.props.editor;
      _this.history = (_editor$get = editor.get('designer')) === null || _editor$get === void 0 ? void 0 : _editor$get.currentHistory;

      _this.updateState(((_this$history2 = _this.history) === null || _this$history2 === void 0 ? void 0 : _this$history2.getState()) || 0);

      editor.on('designer.history.change', function (history) {
        var _this$history3;

        _this.history = history;

        _this.updateState(((_this$history3 = _this.history) === null || _this$history3 === void 0 ? void 0 : _this$history3.getState()) || 0);
      });
    };

    _this.updateState = function (state) {
      _this.setState({
        undoEnable: !!(state & 1),
        redoEnable: !!(state & 2)
      });
    };

    _this.handleUndoClick = function () {
      _this.history.back();
    };

    _this.handleRedoClick = function () {
      _this.history.forward();
    };

    _this.state = {
      undoEnable: false,
      redoEnable: false
    };
    return _this;
  }

  var _proto = UndoRedo.prototype;

  _proto.componentDidMount = /*#__PURE__*/function () {
    var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _this$history4;

      var editor, designer;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              editor = this.props.editor;
              editor.on('designer.history.change', this.handleHistoryChange);
              _context.next = 4;
              return editor.onceGot('designer');

            case 4:
              designer = _context.sent;
              this.history = designer.currentHistory;
              this.updateState(((_this$history4 = this.history) === null || _this$history4 === void 0 ? void 0 : _this$history4.getState()) || 0);

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

    function componentDidMount() {
      return _componentDidMount.apply(this, arguments);
    }

    return componentDidMount;
  }();

  _proto.componentWillUnmount = function componentWillUnmount() {
    var editor = this.props.editor;
    editor.off('designer.history.change', this.handleHistoryChange);
  };

  _proto.render = function render() {
    var _this$props = this.props,
        undoIcon = _this$props.undoIcon,
        redoIcon = _this$props.redoIcon;
    console.log('props: ', this.props);
    var _this$state = this.state,
        undoEnable = _this$state.undoEnable,
        redoEnable = _this$state.redoEnable;
    return /*#__PURE__*/React.createElement("div", {
      className: "lowcode-plugin-undo-redo"
    }, /*#__PURE__*/React.createElement(_Button, {
      size: "medium",
      "data-tip": "\u64A4\u9500",
      "data-dir": "bottom",
      onClick: this.handleUndoClick,
      ghost: true,
      disabled: !undoEnable
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: undoIcon || "arrow-left"
    })), /*#__PURE__*/React.createElement(_Button, {
      size: "medium",
      "data-tip": "\u6062\u590D",
      "data-dir": "bottom",
      onClick: this.handleRedoClick,
      ghost: true,
      disabled: !redoEnable
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: redoIcon || "arrow-right"
    })));
  };

  return UndoRedo;
}(PureComponent);

UndoRedo.displayName = 'LowcodeUndoRedo';
export var undoRedoRegistry = function undoRedoRegistry(ctx) {
  return {
    name: "undo-redo-registry",
    init: function init() {
      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                // 注册回退/前进
                ctx.skeleton.add({
                  area: "topArea",
                  type: "Widget",
                  name: "undoRedo",
                  content: UndoRedo,
                  props: {
                    align: "right",
                    width: 88
                  },
                  contentProps: {
                    undoIcon: 'ic_corner_up_left',
                    redoIcon: 'ic_corner_up_right'
                  }
                });

              case 1:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }))();
    }
  };
};
undoRedoRegistry.pluginName = 'undoRedoRegistry';
export default undoRedoRegistry;