import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["size", "style", "data-tid"];
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 { CommonWrapper } from "../../CommonWrapper";
import { styles } from "../ClearCrossIcon.styles";
import { CrossIcon } from "../CrossIcon";
export var 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
  var theme = React.useContext(ThemeContext);
  var getSizeClassNames = function getSizeClassNames(size) {
    switch (size) {
      case 'large':
        return {
          button: styles.clearCrossLarge(theme),
          span: styles.relativeWidthLarge(theme)
        };
      case 'medium':
        return {
          button: styles.clearCrossMedium(theme),
          span: styles.relativeWidthMedium(theme)
        };
      case 'small':
      default:
        return {
          button: styles.clearCrossSmall(theme),
          span: styles.relativeWidthSmall(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);
  };
  return /*#__PURE__*/(
    React.createElement(CommonWrapper, rest, /*#__PURE__*/
    React.createElement("span", {
      className: getSizeClassNames(size).span
    }, /*#__PURE__*/
    React.createElement("button", _extends({
      "data-tid": dataTid,
      type: "button",
      tabIndex: -1,
      className: cx(styles.root(theme),
      // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
      focusedByTab && styles.focus(theme), getSizeClassNames(size).button),
      style: style,
      onFocus: handleFocus,
      onBlur: handleBlur
    }, rest), /*#__PURE__*/

    React.createElement(CrossIcon, {
      size: size,
      focusable: true
    }))))
  );
};
ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';
ClearCrossIcon.displayName = 'ClearCrossIcon';