// The CSS property the typing-indicator container transitions.
// Mirrored from chat-list.scss `.typing-indicator-height-animation
// { transition: grid-template-rows ... }`. The runtime verifier below
// guards against the SCSS and the handler-side filter silently
// disagreeing.
export const HEIGHT_ANIMATION_PROPERTY = 'grid-template-rows';
/**
 * Returns a `transitionend` listener for the typing indicator's
 * height transition. Filters by property name so unrelated
 * transitions on the same element (e.g. opacity) don't trigger the
 * callback.
 * @param onHeightTransitionEnd
 */
export function createHeightTransitionEndHandler(onHeightTransitionEnd) {
    return (event) => {
        if (event.propertyName !== HEIGHT_ANIMATION_PROPERTY) {
            return;
        }
        onHeightTransitionEnd();
    };
}
/**
 * Verifies that the passed element actually transitions on the
 * property the height-transition handler filters on. Surfaces SCSS
 * drift loudly instead of silently breaking auto-scroll-on-indicator-
 * appearance.
 * @param element
 */
export function verifyHeightAnimationProperty(element) {
    if (!element) {
        return;
    }
    const transitionProperty = globalThis.getComputedStyle(element).transitionProperty;
    if (!transitionProperty) {
        return;
    }
    const properties = new Set(transitionProperty.split(',').map((p) => p.trim()));
    if (!properties.has('all') && !properties.has(HEIGHT_ANIMATION_PROPERTY)) {
        console.warn(`[limebb-chat-list] Typing indicator is transitioning \`${transitionProperty}\` instead of \`${HEIGHT_ANIMATION_PROPERTY}\`. The auto-scroll on indicator appearance will not fire. Update the CSS or the handler so they match.`);
    }
}
