import React, { useContext, useState } from 'react';
import { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';
import { useKeyListener } from '../../lib/events/keyListener.js';
import { getStyles } from './SidePage.styles.js';
import { SidePageLocaleHelper } from './locale/index.js';
import { SidePageHeaderDataTids } from './SidePageHeader.js';
import { SidePageContext } from './SidePageContext.js';
export var SidePageCloseButton = function (_a) {
    var _b;
    var isHeaderFixed = _a.isHeaderFixed, isMobile = _a.isMobile;
    var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
    var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
    var globalObject = useGlobal();
    var theme = useContext(ThemeContext);
    var cx = useEmotion().cx;
    var styles = useStyles(getStyles);
    var keyListener = useKeyListener();
    var sidePageContext = useContext(SidePageContext);
    var handleFocus = function () {
        var _a;
        (_a = globalObject.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(globalObject, function () {
            if (keyListener.isTabPressed) {
                setIsFocusedByTab(true);
            }
        });
    };
    var handleBlur = function () {
        setIsFocusedByTab(false);
    };
    var icon = React.createElement(XIcon20Regular, { align: "none" });
    return (React.createElement("button", { "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeButtonAriaLabel, className: cx(styles.close(theme), (_b = {},
            _b[styles.closeFocus(theme)] = isFocusedByTab,
            _b[styles.closeSticky(theme)] = isHeaderFixed,
            _b[styles.closeMobile(theme)] = isMobile,
            _b)), onFocus: handleFocus, onBlur: handleBlur, onClick: sidePageContext.requestClose, "data-tid": SidePageHeaderDataTids.close }, icon));
};
SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';
SidePageCloseButton.displayName = 'SidePageCloseButton';
//# sourceMappingURL=SidePageCloseButton.js.map