import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
import { useId } from '../utils/useId';
import { useFocusRing } from '../providers/useFocusRing/useFocusRing';
import deprecationLog from '../utils/deprecationLog';
import { classes, st } from './ListItemAction.st.css.js';
import { PrefixIcon } from './components/PrefixIcon/PrefixIcon';
import { Suffix } from './components/Suffix/Suffix';
import { Icon } from './components/SuffixIcon/SuffixIcon';
import { Title } from './components/Title/Title';
import Tooltip from '../Tooltip';
import { DATA_HOOK, SIZE, SKIN } from './ListItemAction.constants';
export const ListItemAction = forwardRef((props, ref) => {
    const { as: Component = 'button', skin = SKIN.standard, size = SIZE.medium, highlighted, dataHook, disabled, prefixIcon, onClick, onMouseEnter, onMouseLeave, tabIndex, onKeyDown, autoFocus, className, subtitle, suffix, suffixIcon, disabledDescription, ...others } = props;
    // We're spreading the "rest" props as "others" so we don't want to pass them to the component
    const { 
    // @ts-expect-error type does not exist but we don't want to pass this
    selected, 
    // @ts-expect-error type does not exist but we don't want to pass this
    hovered, ellipsis, title, shouldFocusWithoutScroll, ...rest } = others;
    const { isFocusVisible, focusProps } = useFocusRing();
    const innerComponentRef = useRef(null);
    const isDisabledWithTooltip = disabled && !!disabledDescription;
    const descriptionId = useId('list-item-action-description');
    const focus = useCallback(() => {
        const scrollOptions = shouldFocusWithoutScroll
            ? { preventScroll: true }
            : {};
        innerComponentRef.current?.focus(scrollOptions);
    }, [shouldFocusWithoutScroll]);
    useImperativeHandle(ref, () => ({ focus }), [focus]);
    useEffect(() => {
        if (skin === SKIN.dark) {
            deprecationLog('<ListItemAction/> - skin="dark" is deprecated and will be removed in next major version, please use skin="standard" instead');
        }
    }, [skin]);
    function renderComponent() {
        return (React.createElement(Component, { "aria-disabled": disabled, ...rest, ref: innerComponentRef, className: st(classes.root, {
                skin,
                disabled,
                highlighted,
                ellipsis,
                size,
                withPrefixIcon: !!prefixIcon,
                withSuffixIcon: !!suffixIcon,
                hoverHighlightDisabled: highlighted === false,
                'focus-visible': isFocusVisible,
            }, className), "data-skin": skin, "data-disabled": disabled, tabIndex: tabIndex ?? 0, autoFocus: autoFocus, type: Component === 'button' ? 'button' : undefined, "data-hook": dataHook, onKeyDown: !disabled ? onKeyDown : undefined, onClick: !disabled ? onClick : undefined, onMouseEnter: !disabled ? onMouseEnter : undefined, onMouseLeave: !disabled ? onMouseLeave : undefined, ...focusProps },
            prefixIcon && (React.createElement(PrefixIcon, { prefixIcon: prefixIcon, size: size, subtitle: subtitle })),
            React.createElement(Title, { title: title, size: size, ellipsis: ellipsis, tooltipModifiers: rest.tooltipModifiers, subtitle: subtitle, disabled: disabled }),
            suffix && (React.createElement(Suffix, { suffix: suffix, size: size, ellipsis: ellipsis, disabled: disabled })),
            suffixIcon && (React.createElement(Icon, { suffixIcon: suffixIcon, size: size, subtitle: subtitle })),
            isDisabledWithTooltip && (React.createElement("span", { id: descriptionId, hidden: true }, disabledDescription))));
    }
    if (isDisabledWithTooltip) {
        return (React.createElement(Tooltip, { dataHook: DATA_HOOK.tooltip, disabled: false, content: disabledDescription, enterDelay: 450, "aria-describedby": descriptionId }, renderComponent()));
    }
    return renderComponent();
});
ListItemAction.displayName = 'ListItemAction';
export const listItemActionBuilder = ({ title, prefixIcon, onClick, onMouseEnter, onMouseLeave, id, disabled, skin, size, dataHook, as, tabIndex, autoFocus, className, ellipsis, subtitle, suffix, disabledDescription, ...rest }) => ({
    id,
    disabled,
    overrideOptionStyle: true,
    label: undefined,
    prefix: prefixIcon,
    value: ({ hovered }) => (React.createElement(ListItemAction, { ...rest, ellipsis: ellipsis, className: className, autoFocus: autoFocus, tabIndex: tabIndex, as: as, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dataHook: dataHook, title: title, prefixIcon: prefixIcon, skin: skin, size: size, highlighted: hovered, disabled: disabled, disabledDescription: disabledDescription, subtitle: subtitle, suffix: suffix })),
});
//# sourceMappingURL=ListItemAction.js.map