"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ClearCrossIcon = 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 _CommonWrapper = require("../CommonWrapper");



var _ClearCrossIcon = require("./ClearCrossIcon.styles");
var _CrossIcon = require("./CrossIcon");var _excluded = ["size", "style", "data-tid"];











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




{var _ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,style = _ref.style,dataTid = _ref['data-tid'],rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
  var getSizeClassNames = function getSizeClassNames(size) {
    switch (size) {
      case 'large':
        return { button: _ClearCrossIcon.styles.clearCrossLarge(theme), span: _ClearCrossIcon.styles.relativeWidthLarge(theme) };
      case 'medium':
        return { button: _ClearCrossIcon.styles.clearCrossMedium(theme), span: _ClearCrossIcon.styles.relativeWidthMedium(theme) };
      case 'small':
      default:
        return { button: _ClearCrossIcon.styles.clearCrossSmall(theme), span: _ClearCrossIcon.styles.relativeWidthSmall(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);};

  return /*#__PURE__*/(
    _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
    _react.default.createElement("span", { className: getSizeClassNames(size).span }, /*#__PURE__*/
    _react.default.createElement("button", (0, _extends2.default)({
      "data-tid": dataTid,
      type: "button",
      tabIndex: -1,
      className: (0, _Emotion.cx)(
        _ClearCrossIcon.styles.root(theme),
        // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
        focusedByTab && _ClearCrossIcon.styles.focus(theme),
        getSizeClassNames(size).button
      ),
      style: style,
      onFocus: handleFocus,
      onBlur: handleBlur },
    rest), /*#__PURE__*/

    _react.default.createElement(_CrossIcon.CrossIcon, { size: size, focusable: true })
    )
    )
    ));

};

ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';
ClearCrossIcon.displayName = 'ClearCrossIcon';