"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CloseButtonIcon = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireDefault(require("react"));
var _globalObject = require("@skbkontur/global-object");

var _Emotion = require("../../lib/theming/Emotion");
var _keyListener = require("../../lib/events/keyListener");
var _ThemeContext = require("../../lib/theming/ThemeContext");
var _iconConstants = require("../icons2022/iconConstants");
var _ThemeFactory = require("../../lib/theming/ThemeFactory");

var _CommonWrapper = require("../CommonWrapper");

var _CloseButtonIcon = require("./CloseButtonIcon.styles");
var _CrossIcon = require("./CrossIcon");var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];





































var CloseButtonIcon = exports.CloseButtonIcon = function CloseButtonIcon(_ref)







{var _ref$side = _ref.side,side = _ref$side === void 0 ? _iconConstants.DEFAULT_ICON_SIZE : _ref$side,_ref$size = _ref.size,size = _ref$size === void 0 ? _iconConstants.DEFAULT_ICON_SIZE : _ref$size,color = _ref.color,colorHover = _ref.colorHover,_ref$tabbable = _ref.tabbable,tabbable = _ref$tabbable === void 0 ? true : _ref$tabbable,style = _ref.style,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
  var _theme = _react.default.useContext(_ThemeContext.ThemeContext);
  var theme = _ThemeFactory.ThemeFactory.create(
    {
      closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
      closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor
    },
    _theme
  );
  var _React$useState = _react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];

  var handleFocus = function handleFocus() {
    // focus event fires before keyDown eventlistener
    // so we should check tabPressed in async way
    _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
      if (_keyListener.keyListener.isTabPressed) {
        setFocusedByTab(true);
      }
    });
  };
  var handleBlur = function handleBlur() {return setFocusedByTab(false);};

  var tabIndex = !tabbable || rest.disabled ? -1 : 0;

  return /*#__PURE__*/(
    _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
    _react.default.createElement("button", (0, _extends2.default)({
      tabIndex: tabIndex,
      className: (0, _Emotion.cx)(
        _CloseButtonIcon.styles.root(theme),
        !rest.disabled && focusedByTab && _CloseButtonIcon.styles.focus(theme),
        rest.disabled && _CloseButtonIcon.styles.rootDisabled(theme)
      ),
      style: (0, _extends2.default)({}, style, { width: side, height: side }),
      onFocus: handleFocus,
      onBlur: handleBlur },
    rest), /*#__PURE__*/

    _react.default.createElement("span", { className: _CloseButtonIcon.styles.wrapper() }, /*#__PURE__*/
    _react.default.createElement(_CrossIcon.CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })
    )
    )
    ));

};

CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';
CloseButtonIcon.displayName = 'CloseButtonIcon';