'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useDeepCompareEffect } from '@react-hookz/web';
import avatarPlaceholderRounded from '@graphprotocol/gds-react/assets/avatar-placeholder-rounded.png';
import { createIdenticon, PLACEHOLDER_ADDRESS } from '@graphprotocol/gds-utils';
import { useCSSPropsPolyfill, useGDS } from "../hooks/index.js";
import { cn, getAssetUrl, getCSSPropsAttributes, isReactNode } from "../utils/index.js";
import { AvatarMeta } from "./Avatar.meta.js";
import { MaybeButtonOrLink } from "./base/MaybeButtonOrLink.js";
import { Tooltip } from "./Tooltip.js";
const PLACEHOLDER_SRC_CIRCLE = createIdenticon(PLACEHOLDER_ADDRESS);
const PLACEHOLDER_SRC_ROUNDED = getAssetUrl(avatarPlaceholderRounded);
export function Avatar({ ref: passedRef, shape, size, src: passedSrc, alt, tooltip, className, style, ...props }) {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(AvatarMeta, { shape, size }, { ref: passedRef, returnPropValues: { shape } });
    const sourcesToTryInOrder = passedSrc ? (Array.isArray(passedSrc) ? passedSrc : [passedSrc]) : [];
    const [currentSourceIndex, setCurrentSourceIndex] = useState(0);
    const src = sourcesToTryInOrder[currentSourceIndex] ??
        (cssProps.shape === 'circle' ? PLACEHOLDER_SRC_CIRCLE : PLACEHOLDER_SRC_ROUNDED);
    /**
     * Reset to first URL when `passedSrc` changes (using deep comparison so that a different array
     * with the same values as the previous one doesn't trigger a reset).
     */
    useDeepCompareEffect(() => {
        setCurrentSourceIndex(0);
    }, [sourcesToTryInOrder]);
    return (_jsx(MaybeButtonOrLink, { ref: cssPropsPolyfillPassedRef, className: cn('group/avatar peer/avatar gds-avatar root-flex u:shrink-0 u:outline-0 i:size-max', className), ...getCSSPropsAttributes(AvatarMeta, { shape, size }, style), ...cssPropsPolyfillAttributes, ...props, render: (renderProps, { Element, elementProps, category }) => {
            return (_jsx(Tooltip, { content: category !== 'other' ? alt : undefined, ...(isReactNode(tooltip) ? { content: tooltip } : tooltip), triggerProps: renderProps, children: _jsx(Element, { ...elementProps, children: _jsx("span", { className: "nested/avatar-paint pointer-events-none shrink-0", children: _jsxs("span", { className: `
                    block overflow-clip bg-default
                    group-clickable-focus-visible/avatar:outline
                    @prop-size-xsmall/avatar:size-4
                    @prop-size-small/avatar:size-5
                    @prop-size-medium/avatar:size-6
                    @prop-size-large/avatar:size-8
                    @prop-size-xlarge/avatar:size-12
                    @prop-shape-circle/avatar:rounded-full
                    @prop-shape-rounded/avatar:rounded-4
                    @prop-shape-rounded/avatar:@prop-size-xsmall/avatar:rounded-2
                    @prop-shape-rounded/avatar:@prop-size-xlarge/avatar:rounded-8
                    uu:*:absolute
                    uu:*:inset-0
                    uu:*:m-auto
                    uu:*:size-full
                    uu:*:object-cover
                    i:@prop-size-xsmall/avatar:**:icon:default-size-2.5
                    i:@prop-size-small/avatar:**:icon:default-size-3
                    i:@prop-size-medium/avatar:**:icon:default-size-4
                    i:@prop-size-large/avatar:**:icon:default-size-5
                    i:@prop-size-xlarge/avatar:**:icon:default-size-8
                  `, children: [src ? (typeof src === 'string' ? (_jsx("img", { src: src, alt: "", onError: () => setCurrentSourceIndex(currentSourceIndex + 1), className: "[[src^='data:image/bmp']]:[image-rendering:pixelated]" })) : (_jsx(Tooltip.Collector, { children: src }))) : null, alt ? _jsx("span", { className: "sr-only", children: alt }) : null] }) }) }) }));
        } }));
}
//# sourceMappingURL=Avatar.js.map