import React, { useContext, useState } from 'react';
import { globalObject } from '@skbkontur/global-object';
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
import { XIcon20Regular } from "../../../internal/icons2022/XIcon/XIcon20Regular";
import { cx } from "../../../lib/theming/Emotion";
import { keyListener } from "../../../lib/events/keyListener";
import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
import { styles } from "../SidePage.styles";
import { SidePageLocaleHelper } from "../locale";
import { SidePageHeaderDataTids } from "../SidePageHeader";
import { SidePageContext } from "../SidePageContext";
export var SidePageCloseButton = function SidePageCloseButton(_ref) {
  var _cx;
  var isHeaderFixed = _ref.isHeaderFixed,
    isMobile = _ref.isMobile;
  var _useState = useState(false),
    isFocusedByTab = _useState[0],
    setIsFocusedByTab = _useState[1];
  var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
  var theme = useContext(ThemeContext);
  var sidePageContext = useContext(SidePageContext);
  var handleFocus = function handleFocus() {
    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
      if (keyListener.isTabPressed) {
        setIsFocusedByTab(true);
      }
    });
  };
  var handleBlur = function handleBlur() {
    setIsFocusedByTab(false);
  };
  var icon = /*#__PURE__*/React.createElement(XIcon20Regular, {
    align: "none"
  });
  var versionGTE5_1 = isThemeGTE(theme, '5.1');
  return /*#__PURE__*/(
    React.createElement("button", {
      "aria-label": locale == null ? void 0 : locale.closeButtonAriaLabel,
      className: cx(styles.close(theme), (_cx = {}, _cx[styles.close5_1(theme)] = versionGTE5_1, _cx[styles.closeFocus(theme)] = isFocusedByTab && !versionGTE5_1, _cx[styles.closeFocus5_1(theme)] = isFocusedByTab && versionGTE5_1, _cx[styles.closeSticky(theme)] = isHeaderFixed && versionGTE5_1, _cx[styles.closeMobile(theme)] = isMobile && versionGTE5_1, _cx)),
      onFocus: handleFocus,
      onBlur: handleBlur,
      onClick: sidePageContext.requestClose,
      "data-tid": SidePageHeaderDataTids.close
    }, icon)
  );
};
SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';
SidePageCloseButton.displayName = 'SidePageCloseButton';