import React from 'react';
import { st, classes, cssStates } from '../VerticalTabsItem.st.css.js';
import { Affix } from './Affix';
import { DATA_HOOKS } from '../VerticalTabsItem.constants';
import { Text } from '../..';
import { SIZE } from '../../VerticalTabs/VerticalTabs.constants';
const SelectableItem = ({ children, dataHook, prefixIcon, suffixIcon, size, baseSkin, disabled, id, tabIndex, skin, ellipsis, selected, onChange, 'aria-controls': ariaControls, focusableOnFocus, focusableOnBlur, }) => {
    const onKeyDown = (e) => {
        if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {
            e.preventDefault();
            if (id !== undefined) {
                onChange?.(id);
            }
        }
    };
    return (React.createElement("div", { className: st(classes.wrapper, cssStates({
            disabled,
            baseSkin,
            skin,
            selected,
        })), id: String(id), role: "tab", "data-hook": dataHook, tabIndex: tabIndex, "aria-selected": selected, "aria-disabled": disabled, "aria-controls": ariaControls, onFocus: focusableOnFocus, onBlur: focusableOnBlur, onClick: !disabled && id !== undefined ? () => onChange?.(id) : undefined, onKeyDown: !disabled ? e => onKeyDown(e) : undefined },
        React.createElement("div", { className: st(classes.root, classes.selectableItem, cssStates({
                disabled,
                size,
                baseSkin,
                skin,
                suffixIcon: !!suffixIcon,
                prefixIcon: !!prefixIcon,
                selected,
            })) },
            React.createElement(Affix, { dataHook: DATA_HOOKS.ITEM_PREFIX_ICON, size: size, className: st(classes.prefixIcon) }, prefixIcon),
            React.createElement(Text, { className: classes.text, weight: "thin", ellipsis: ellipsis, size: size === SIZE.TINY ? SIZE.SMALL : size, dataHook: DATA_HOOKS.ITEM_TEXT }, children),
            React.createElement(Affix, { dataHook: DATA_HOOKS.ITEM_SUFFIX_ICON, size: size, className: classes.suffixIcon }, suffixIcon))));
};
export { SelectableItem };
//# sourceMappingURL=SelectableItem.js.map