// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef, useState } from 'react';
import clsx from 'clsx';
import { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
import { getBaseProps } from '../internal/base-component';
import Option from '../internal/components/option';
import LiveRegion from '../live-region/internal';
import Tooltip from '../tooltip/internal.js';
import DismissButton from './dismiss-button';
import { getTokenRootStyles } from './styles';
import legacyTestingStyles from '../token-group/styles.css.js';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
function InternalToken({ 
// External
label, ariaLabel, labelTag, description, variant = 'normal', disabled, readOnly, icon, tags, dismissLabel, onDismiss, tooltipContent, 
// Internal
role, disableInnerPadding, 
// Base
__internalRootRef, ...restProps }) {
    const baseProps = getBaseProps(restProps);
    const tokenRootStyleProps = getTokenRootStyles(restProps.style);
    const labelContainerRef = useRef(null);
    const labelRef = useRef(null);
    const [showTooltip, setShowTooltip] = useState(false);
    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
    const isInline = variant === 'inline';
    const ariaLabelledbyId = useUniqueId();
    const isLabelOverflowing = () => {
        const labelContent = labelRef.current;
        const labelContainer = labelContainerRef.current;
        if (labelContent && labelContainer) {
            return labelContent.offsetWidth > labelContainer.offsetWidth;
        }
    };
    useResizeObserver(labelContainerRef, () => {
        var _a;
        if (isInline) {
            setIsEllipsisActive((_a = isLabelOverflowing()) !== null && _a !== void 0 ? _a : false);
        }
    });
    const buildOptionDefinition = () => {
        const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';
        const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };
        if (isInline) {
            if (!isLabelStringOrNumber) {
                warnOnce('Label', `Only plain text (strings or numbers) are supported when variant="inline".`);
            }
            return {
                ...labelObject,
                disabled,
                __customIcon: icon && React.createElement("span", { className: clsx(styles.icon, styles['icon-inline']) }, icon),
            };
        }
        else {
            return {
                ...labelObject,
                disabled,
                labelTag,
                description,
                tags,
                __customIcon: icon && React.createElement("span", { className: styles.icon }, icon),
            };
        }
    };
    // Use span for inline tokens (e.g. inside contentEditable) to avoid block-level elements breaking text flow.
    const SpanOrDivTag = isInline ? 'span' : 'div';
    return (React.createElement(SpanOrDivTag, { ...baseProps, ref: __internalRootRef, className: clsx(styles.root, legacyTestingStyles.token, testUtilStyles.root, !isInline ? styles['token-normal'] : styles['token-inline'], analyticsSelectors.token, baseProps.className), "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledbyId : undefined, "aria-disabled": !!disabled, role: role !== null && role !== void 0 ? role : 'group', onFocus: () => {
            setShowTooltip(true);
        }, onBlur: () => {
            setShowTooltip(false);
        }, onMouseEnter: () => {
            setShowTooltip(true);
        }, onMouseLeave: () => {
            setShowTooltip(false);
        }, tabIndex: !!tooltipContent && isInline && isEllipsisActive ? 0 : undefined },
        React.createElement(SpanOrDivTag, { className: clsx(!isInline ? styles['token-box'] : styles['token-box-inline'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], !isInline && !onDismiss && styles['token-box-without-dismiss'], disableInnerPadding && styles['disable-padding']), style: tokenRootStyleProps },
            React.createElement(Option, { className: clsx(isInline && styles['token-option-inline']), triggerVariant: isInline, option: buildOptionDefinition(), disableTitleTooltip: !!tooltipContent, labelContainerRef: labelContainerRef, labelRef: labelRef, labelId: ariaLabelledbyId }),
            onDismiss && (React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss, readOnly: readOnly, inline: isInline }))),
        !!tooltipContent && isInline && isEllipsisActive && showTooltip && (React.createElement(Tooltip, { "data-testid": "token-tooltip", getTrack: () => labelContainerRef.current, content: React.createElement(LiveRegion, null,
                React.createElement("span", { "data-testid": "tooltip-live-region-content" }, tooltipContent)), onEscape: () => {
                setShowTooltip(false);
            } }))));
}
export default InternalToken;
//# sourceMappingURL=internal.js.map