/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-5e810c3
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, } from 'react';
import { DANGER_CLEAR_STYLES, DANGER_NEUTRAL_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, ITEM_ACTION_BASE_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, } from '../../../data/item-themes.js';
import { CheckIcon } from '../../../icons/CheckIcon.js';
import { LoadingIcon } from '../../../icons/LoadingIcon.js';
import { tasty } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { useItemActionContext } from '../../actions/ItemActionContext.js';
import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider.js';
const ItemBadgeElement = tasty({
    qa: 'ItemBadge',
    styles: {
        ...ITEM_ACTION_BASE_STYLES,
        cursor: 'default',
    },
    variants: {
        // Default theme
        'default.primary': DEFAULT_PRIMARY_STYLES,
        'default.secondary': DEFAULT_SECONDARY_STYLES,
        'default.neutral': DEFAULT_NEUTRAL_STYLES,
        'default.clear': DEFAULT_CLEAR_STYLES,
        // Danger theme
        'danger.primary': DANGER_PRIMARY_STYLES,
        'danger.secondary': DANGER_SECONDARY_STYLES,
        'danger.neutral': DANGER_NEUTRAL_STYLES,
        'danger.clear': DANGER_CLEAR_STYLES,
        // Success theme
        'success.primary': SUCCESS_PRIMARY_STYLES,
        'success.secondary': SUCCESS_SECONDARY_STYLES,
        'success.neutral': SUCCESS_NEUTRAL_STYLES,
        'success.clear': SUCCESS_CLEAR_STYLES,
        // Special theme
        'special.primary': SPECIAL_PRIMARY_STYLES,
        'special.secondary': SPECIAL_SECONDARY_STYLES,
        'special.neutral': SPECIAL_NEUTRAL_STYLES,
        'special.clear': SPECIAL_CLEAR_STYLES,
    },
});
export const ItemBadge = forwardRef(function ItemBadge(allProps, ref) {
    const { type: contextType, theme: contextTheme } = useItemActionContext();
    const { type = contextType ?? 'neutral', theme = contextTheme ?? 'default', icon, children, isLoading = false, isSelected = false, tooltip, mods, ...rest } = allProps;
    // Determine if we should show checkbox
    const hasCheckbox = icon === 'checkbox';
    // Determine final icon (loading takes precedence)
    const finalIcon = isLoading ? (_jsx(LoadingIcon, {})) : hasCheckbox ? (_jsx(CheckIcon, {})) : (icon);
    // Build modifiers
    const finalMods = useMemo(() => ({
        checkbox: hasCheckbox,
        selected: isSelected,
        loading: isLoading,
        'has-label': !!children,
        context: !!contextType,
        ...mods,
    }), [hasCheckbox, isSelected, isLoading, children, contextType, mods]);
    // Extract aria-label from tooltip if needed
    const ariaLabel = useMemo(() => {
        if (typeof tooltip === 'string') {
            return tooltip;
        }
        if (typeof tooltip === 'object' && tooltip.title) {
            return tooltip.title;
        }
        return rest['aria-label'];
    }, [tooltip, rest]);
    // Determine if we should show tooltip (icon-only badges)
    const showTooltip = !children && tooltip;
    // Extract tooltip content and props
    const tooltipContent = useMemo(() => {
        if (typeof tooltip === 'string') {
            return tooltip;
        }
        if (typeof tooltip === 'object' && tooltip.title) {
            return tooltip.title;
        }
        return undefined;
    }, [tooltip]);
    const tooltipProps = useMemo(() => {
        if (typeof tooltip === 'object') {
            const { title, ...rest } = tooltip;
            return rest;
        }
        return {};
    }, [tooltip]);
    const finalType = useMemo(() => {
        return theme !== 'default' && type === 'neutral' ? 'clear' : type;
    }, [theme, type]);
    // Render function that accepts tooltip trigger props and ref
    const renderBadge = (tooltipTriggerProps, tooltipRef) => {
        // Merge tooltip ref with component ref if provided
        const handleRef = (element) => {
            // Set the component ref
            if (typeof ref === 'function') {
                ref(element);
            }
            else if (ref) {
                ref.current = element;
            }
            // Set the tooltip ref
            if (tooltipRef) {
                tooltipRef.current = element;
            }
        };
        return (_jsxs(ItemBadgeElement, { ref: handleRef, variant: `${theme}.${finalType}`, "data-theme": theme, "data-type": finalType, "aria-label": ariaLabel, mods: finalMods, ...mergeProps(rest, tooltipTriggerProps || {}), children: [finalIcon && _jsx("div", { "data-element": "Icon", children: finalIcon }), children] }));
    };
    // Wrap with tooltip if needed
    if (showTooltip && tooltipContent) {
        return (_jsx(TooltipProvider, { title: tooltipContent, ...tooltipProps, children: (triggerProps, tooltipRef) => renderBadge(triggerProps, tooltipRef) }));
    }
    return renderBadge();
});

        