import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["disableClose", "requestClose"];
import React, { useContext } from 'react';
import { globalObject } from '@skbkontur/global-object';
import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { keyListener } from "../../../lib/events/keyListener";
import { ResponsiveLayout } from "../../ResponsiveLayout";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { XIcon20Regular } from "../../../internal/icons2022/XIcon/XIcon20Regular";
import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
import { styles } from "../Modal.styles";
import { ModalDataTids } from "../Modal";
import { ModalLocaleHelper } from "../locale";
export function ModalClose(_ref) {
  var disableClose = _ref.disableClose,
    requestClose = _ref.requestClose,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var locale = useLocaleForControl('Modal', ModalLocaleHelper);
  var theme = useContext(ThemeContext);
  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() {
    setFocusedByTab(false);
  };
  var icon = /*#__PURE__*/React.createElement(XIcon20Regular, {
    align: "none"
  });
  var versionGTE5_1 = isThemeGTE(theme, '5.1');
  return /*#__PURE__*/(
    React.createElement(CommonWrapper, otherProps, /*#__PURE__*/
    React.createElement(ResponsiveLayout, null, function (_ref2) {
      var _cx;
      var isMobile = _ref2.isMobile;
      return /*#__PURE__*/(
        React.createElement("button", {
          "aria-label": locale.closeButtonAriaLabel,
          className: cx((_cx = {}, _cx[styles.close(theme)] = true, _cx[styles.close5_1(theme)] = versionGTE5_1, _cx[styles.closeMobile(theme)] = isMobile, _cx[styles.closeMobile5_1(theme)] = isMobile && versionGTE5_1, _cx[styles.disabled(theme)] = disableClose, _cx[styles.focus(theme)] = focusedByTab && !versionGTE5_1, _cx[styles.focus5_1(theme)] = focusedByTab && versionGTE5_1, _cx)),
          onClick: requestClose,
          onFocus: handleFocus,
          onBlur: handleBlur,
          "data-tid": ModalDataTids.close,
          tabIndex: disableClose ? -1 : 0
        }, icon)
      );
    }))
  );
}
ModalClose.__KONTUR_REACT_UI__ = 'ModalClose';
ModalClose.displayName = 'ModalClose';