import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
import React from 'react';
import { globalObject } from '@skbkontur/global-object';
import { cx } from "../../../lib/theming/Emotion";
import { keyListener } from "../../../lib/events/keyListener";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { DEFAULT_ICON_SIZE } from "../../icons2022/iconConstants";
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
import { CommonWrapper } from "../../CommonWrapper";
import { styles } from "../CloseButtonIcon.styles";
import { CrossIcon } from "../CrossIcon";
export var CloseButtonIcon = function CloseButtonIcon(_ref) {
  var _ref$side = _ref.side,
    side = _ref$side === void 0 ? DEFAULT_ICON_SIZE : _ref$side,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _theme = React.useContext(ThemeContext);
  var theme = ThemeFactory.create({
    closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
    closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor
  }, _theme);
  var _React$useState = React.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.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
      if (keyListener.isTabPressed) {
        setFocusedByTab(true);
      }
    });
  };
  var handleBlur = function handleBlur() {
    return setFocusedByTab(false);
  };
  var tabIndex = !tabbable || rest.disabled ? -1 : 0;
  return /*#__PURE__*/(
    React.createElement(CommonWrapper, rest, /*#__PURE__*/
    React.createElement("button", _extends({
      tabIndex: tabIndex,
      className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)),
      style: _extends({}, style, {
        width: side,
        height: side
      }),
      onFocus: handleFocus,
      onBlur: handleBlur
    }, rest), /*#__PURE__*/

    React.createElement("span", {
      className: styles.wrapper()
    }, /*#__PURE__*/
    React.createElement(CrossIcon, {
      size: side < size ? side : size,
      focusable: tabIndex >= 0
    }))))
  );
};
CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';
CloseButtonIcon.displayName = 'CloseButtonIcon';