import React, { useCallback } from 'react';
import { css } from 'emotion';
import Fishx from '@fishx/core';
import { ActionCreators } from 'redux-undo';
import { connect } from "../../redux";
import { isPluginActive, getPluginType } from "../../selectors";
import { IconButton } from '@webiny/ui/Button';
import { Tooltip } from '@whalecloud/fdx';
import { formBuilderConfig } from "../../../config/config";
import previewDeviceConfig from "../../../config/previewDeviceConfig";
var _formBuilderConfig$pr = formBuilderConfig.previewDevice,
    defaultPreviewDevice = _formBuilderConfig$pr === void 0 ? '' : _formBuilderConfig$pr;
var PC = previewDeviceConfig.PC,
    mobile = previewDeviceConfig.mobile;
var btnStyle = /*#__PURE__*/css({
  button: {
    minWidth: 25
  }
}, "label:btnStyle;");

var Action = function Action(_ref) {
  var icon = _ref.icon,
      onClick = _ref.onClick,
      active = _ref.active,
      text = _ref.text,
      change = _ref.change,
      tooltip = _ref.tooltip,
      togglePlugin = _ref.togglePlugin,
      changePlugin = _ref.changePlugin,
      undo = _ref.undo,
      redo = _ref.redo,
      plugin = _ref.plugin,
      changePreviewDevice = _ref.changePreviewDevice,
      previewDevice = _ref.previewDevice;
  var clickHandler = useCallback(function () {
    if (previewDevice) {
      changePlugin({
        name: plugin
      });
      return changePreviewDevice({
        previewDevice: previewDevice
      });
    }

    if (typeof onClick === 'function') {
      return onClick();
    } else if (onClick === 'undo') {
      return undo();
    } else if (onClick === 'redo') {
      return redo();
    }

    if (plugin === 'pb-editor-toolbar-preview') {
      Fishx.history.push('/page-builder/pages');
    } else if (change) {
      changePlugin({
        name: plugin
      });
    } else togglePlugin({
      name: plugin
    });
  }, [plugin]);
  var btnIcon = icon;

  if (Array.isArray(icon)) {
    btnIcon = active ? icon[0] : icon[1];
  }

  var iconButton = /*#__PURE__*/React.createElement("div", {
    className: "formbuild-btn-opt-default-color ".concat(btnStyle, " ").concat(active && change && 'pagebuilder-bar-opt-active'),
    onClick: clickHandler
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
    icon: btnIcon
  }), /*#__PURE__*/React.createElement("span", null, text)));

  if (tooltip) {
    return /*#__PURE__*/React.createElement(Tooltip, Object.assign({
      placement: 'right',
      title: tooltip
    }, active ? {
      visible: false
    } : {}), iconButton);
  }

  return iconButton;
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    changePlugin: function changePlugin(payload) {
      dispatch({
        type: 'ui/changePlugin',
        payload: payload
      });
    },
    togglePlugin: function togglePlugin(payload) {
      dispatch({
        type: 'ui/togglePlugin',
        payload: payload
      });
    },
    undo: function undo() {
      dispatch(ActionCreators.undo());
    },
    redo: function redo() {
      dispatch(ActionCreators.redo());
    },
    changePreviewDevice: function changePreviewDevice(payload) {
      dispatch({
        type: 'ui/changePreviewDevice',
        payload: payload
      });
    }
  };
};

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

  var _ref2 = ((_state$appBuilder = state.appBuilder) === null || _state$appBuilder === void 0 ? void 0 : _state$appBuilder.config) || {},
      _ref2$buildMode = _ref2.buildMode,
      buildMode = _ref2$buildMode === void 0 ? '' : _ref2$buildMode;

  var active = isPluginActive(props.plugin)(state);
  var handleType = buildMode === PC ? PC : mobile;

  if (!active && props.previewDevice === (buildMode ? handleType : defaultPreviewDevice)) {
    // 没有选中项时，默认PC选中
    var type = getPluginType(props.plugin);

    if (!state.ui.plugins[type]) {
      active = true;
    }
  }

  return {
    active: active
  };
}, mapDispatchToProps)( /*#__PURE__*/React.memo(Action));
//# sourceMappingURL=Action.js.map