import React, { useContext } from 'react';
import { st, classes, cssStates } from './VerticalTabsIconItem.st.css.js';
import VerticalTabsContext from '../VerticalTabs/VerticalTabsContext';
import { DATA_HOOKS } from './VerticalTabsIconItem.constants';
import { withFocusable } from '../common/Focusable';
import { SIZE } from '../VerticalTabs/VerticalTabs.constants';
export const VerticalTabsIconItem = ({ id, dataHook = DATA_HOOKS.ICON_WRAPPER, disabled, focusableOnFocus, focusableOnBlur, tabIndex, 'aria-controls': ariaControls, 'aria-label': ariaLabel, children, }) => {
    const { activeTabId, onChange, size, skin } = useContext(VerticalTabsContext);
    const selected = id !== undefined && activeTabId !== undefined && id === activeTabId;
    function onKeyDown(e) {
        if ((e.key === ' ' || e.key === 'Space' || e.key === 'Enter') &&
            id !== undefined) {
            onChange?.(id);
        }
    }
    return (React.createElement("div", { id: String(id), className: st(classes.root, cssStates({
            size,
            skin,
            selected,
            disabled,
        })), "data-hook": dataHook, role: "tab", tabIndex: tabIndex ?? (disabled ? -1 : 0), "aria-disabled": disabled, "aria-selected": selected, "aria-controls": ariaControls, "aria-label": ariaLabel, onFocus: focusableOnFocus, onBlur: focusableOnBlur, onClick: !disabled && id !== undefined ? () => onChange?.(id) : undefined, onKeyDown: !disabled ? e => onKeyDown(e) : undefined }, children
        ? React.cloneElement(children, {
            size: size === SIZE.MEDIUM ? 24 : 18,
        })
        : null));
};
VerticalTabsIconItem.displayName = 'VerticalTabsIconItem';
export default withFocusable(VerticalTabsIconItem);
//# sourceMappingURL=VerticalTabsIconItem.js.map