import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Stack, Typography } from '@mui/material';
import { IconBell, IconBriefcase, IconCheck, IconHeart, IconInfoCircle, IconStar, IconUser, } from '@tabler/icons-react';
import ImgAvatar1 from '../../../../static/avatar1.png';
import Avatar from '.';
const SAMPLE_IMAGE = ImgAvatar1;
const BROKEN_IMAGE = 'https://example.com/nonexistent-image.png';
const COLORS = [
    'default',
    'white',
    'primary',
    'highlight',
    'success',
    'error',
    'warning',
    'info',
];
const SIZES = ['small', 'medium', 'large'];
const SIZE_PIXELS = {
    small: '32',
    medium: '40',
    large: '60',
};
const SHAPES = [
    'circular',
    'rounded',
    'square',
];
const Showcase = ({ label, children }) => (_jsxs(Stack, { sx: { alignItems: 'center', gap: 1, minWidth: 80 }, children: [_jsx(Box, { sx: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                minHeight: 60,
            }, children: children }), _jsx(Typography, { variant: "globalXS", color: "text.secondary", sx: { textTransform: 'capitalize' }, children: label })] }));
const Section = ({ title, children }) => (_jsxs(Stack, { sx: { gap: 2 }, children: [_jsx(Typography, { variant: "globalS", fontWeight: "fontWeightSemiBold", color: "text.primary", children: title }), _jsx(Stack, { direction: "row", sx: { gap: 3, flexWrap: 'wrap', alignItems: 'flex-end' }, children: children })] }));
const meta = {
    component: Avatar,
    title: 'Design System/Avatars/Avatar',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'Displays a user or entity avatar. Renders an image when `src` is provided, falls back to ' +
                    '`text` (initials), then to an `Icon` (default: IconUser). Supports three sizes, three ' +
                    'shape variants, eight colour variants, an optional badge, disabled and loading states.',
            },
        },
    },
    argTypes: {
        src: {
            description: 'Image URL. Takes priority over `text` and `Icon`.',
            control: { type: 'text' },
            table: { type: { summary: 'string' } },
        },
        text: {
            description: 'Fallback text (e.g. initials) shown when `src` is not available.',
            control: { type: 'text' },
            table: { type: { summary: 'string' } },
        },
        Icon: {
            description: 'Fallback icon shown when neither `src` nor `text` is available.',
            control: false,
            table: {
                type: { summary: 'TablerIcon' },
                defaultValue: { summary: 'IconUser' },
            },
        },
        alt: {
            description: 'Alt text for the image.',
            control: { type: 'text' },
            table: { type: { summary: 'string' } },
        },
        size: {
            description: 'Avatar dimensions: small (32px), medium (40px), large (60px).',
            control: 'inline-radio',
            options: SIZES,
            table: {
                type: { summary: "'small' | 'medium' | 'large'" },
                defaultValue: { summary: "'medium'" },
            },
        },
        variant: {
            description: 'Shape of the avatar. Also determines the skeleton shape when loading.',
            control: 'inline-radio',
            options: SHAPES,
            table: {
                type: { summary: "'circular' | 'rounded' | 'square'" },
            },
        },
        color: {
            description: 'Background/foreground colour variant applied to the fallback state.',
            control: 'select',
            options: COLORS,
            table: {
                type: {
                    summary: "'white' | 'default' | 'primary' | 'highlight' | 'success' | 'error' | 'warning' | 'info'",
                },
                defaultValue: { summary: "'default'" },
            },
        },
        loading: {
            description: 'When true, renders a Skeleton placeholder matching the configured size and variant.',
            control: { type: 'boolean' },
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        disabled: {
            description: 'If true, reduces opacity and disables pointer events.',
            control: { type: 'boolean' },
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        withBadge: {
            description: 'If true, wraps the avatar with a Badge.',
            control: { type: 'boolean' },
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        badgeProps: {
            description: 'Props forwarded to the Badge component. `badgeContent` controls the number; ' +
                '`variant` is forced to `dot` for small avatars or when no content is provided.',
            control: 'object',
            table: { type: { summary: 'BadgeProps' } },
        },
        onClick: {
            description: 'Click handler for the avatar.',
            control: false,
            table: { type: { summary: '(event: React.MouseEvent) => void' } },
        },
        sx: {
            description: 'MUI `sx` style overrides applied to the inner MUI Avatar.',
            control: false,
            table: { type: { summary: 'SxProps' } },
        },
    },
    args: {
        src: SAMPLE_IMAGE,
        alt: 'Sofía Fernández',
        text: 'SF',
        variant: 'circular',
        size: 'medium',
        color: 'default',
    },
};
export default meta;
/**
 * Playground story. Use the controls panel to explore every prop and combine
 * them freely.
 */
export const Playground = {
    args: {},
};
/**
 * Eight semantic colour variants intended for the *fallback* states (initials
 * and icon). Colours are not applied when a valid `src` is rendered.
 */
export const Colors = {
    parameters: { controls: { disable: true } },
    render: () => (_jsxs(Stack, { sx: { gap: 4 }, children: [_jsx(Section, { title: "With initials", children: COLORS.map(color => (_jsx(Showcase, { label: color, children: _jsx(Avatar, { text: "SF", color: color }) }, `text-${color}`))) }), _jsx(Section, { title: "With icon", children: COLORS.map(color => (_jsx(Showcase, { label: color, children: _jsx(Avatar, { Icon: IconUser, color: color }) }, `icon-${color}`))) })] })),
};
/**
 * Three avatar dimensions. Icon and initials are scaled accordingly to stay
 * legible at every size.
 */
export const Sizes = {
    parameters: { controls: { disable: true } },
    render: () => (_jsxs(Stack, { sx: { gap: 4 }, children: [_jsx(Section, { title: "Image", children: SIZES.map(size => (_jsx(Showcase, { label: `${size} (${SIZE_PIXELS[size]}px)`, children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User", size: size }) }, `img-${size}`))) }), _jsx(Section, { title: "Initials", children: SIZES.map(size => (_jsx(Showcase, { label: size, children: _jsx(Avatar, { text: "SF", color: "primary", size: size }) }, `text-${size}`))) }), _jsx(Section, { title: "Icon", children: SIZES.map(size => (_jsx(Showcase, { label: size, children: _jsx(Avatar, { Icon: IconUser, color: "highlight", size: size }) }, `icon-${size}`))) })] })),
};
/**
 * Shape variants: `circular`, `rounded`, and `square`. The same shape is used
 * for the loading skeleton.
 */
export const Shapes = {
    parameters: { controls: { disable: true } },
    render: () => (_jsxs(Stack, { sx: { gap: 4 }, children: [_jsx(Section, { title: "Image", children: SHAPES.map(variant => (_jsx(Showcase, { label: variant, children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User", variant: variant }) }, `img-${variant}`))) }), _jsx(Section, { title: "Initials", children: SHAPES.map(variant => (_jsx(Showcase, { label: variant, children: _jsx(Avatar, { text: "SF", color: "primary", variant: variant }) }, `text-${variant}`))) }), _jsx(Section, { title: "Icon", children: SHAPES.map(variant => (_jsx(Showcase, { label: variant, children: _jsx(Avatar, { Icon: IconUser, color: "highlight", variant: variant }) }, `icon-${variant}`))) })] })),
};
/**
 * Fallback hierarchy: `src` → `text` (initials) → `Icon`. When the image fails
 * to load (or is omitted) the avatar gracefully falls back through each level.
 */
export const Fallbacks = {
    parameters: { controls: { disable: true } },
    render: () => (_jsxs(Section, { title: "Fallback hierarchy", children: [_jsx(Showcase, { label: "src (image)", children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User", text: "SF" }) }), _jsx(Showcase, { label: "text (broken src)", children: _jsx(Avatar, { src: BROKEN_IMAGE, text: "SF", color: "primary" }) }), _jsx(Showcase, { label: "alt (no text)", children: _jsx(Avatar, { src: BROKEN_IMAGE, alt: "Sof\u00EDa Fern\u00E1ndez", color: "success" }) }), _jsx(Showcase, { label: "default icon", children: _jsx(Avatar, { color: "highlight" }) }), _jsx(Showcase, { label: "custom icon", children: _jsx(Avatar, { Icon: IconStar, color: "warning" }) })] })),
};
/**
 * Different Tabler icons can be used as the fallback content via the `Icon`
 * prop. Pair them with semantic colours to convey meaning.
 */
export const CustomIcons = {
    parameters: { controls: { disable: true } },
    render: () => (_jsxs(Section, { title: "Tabler icons", children: [_jsx(Showcase, { label: "User", children: _jsx(Avatar, { Icon: IconUser, color: "default" }) }), _jsx(Showcase, { label: "Star", children: _jsx(Avatar, { Icon: IconStar, color: "warning" }) }), _jsx(Showcase, { label: "Heart", children: _jsx(Avatar, { Icon: IconHeart, color: "error" }) }), _jsx(Showcase, { label: "Briefcase", children: _jsx(Avatar, { Icon: IconBriefcase, color: "primary" }) }), _jsx(Showcase, { label: "Check", children: _jsx(Avatar, { Icon: IconCheck, color: "success" }) }), _jsx(Showcase, { label: "Info", children: _jsx(Avatar, { Icon: IconInfoCircle, color: "info" }) })] })),
};
/**
 * Disabled state. Reduces opacity and removes pointer events while keeping the
 * avatar visible.
 */
export const Disabled = {
    parameters: { controls: { disable: true } },
    render: () => (_jsx(Stack, { sx: { gap: 4 }, children: _jsxs(Section, { title: "Enabled vs Disabled", children: [_jsx(Showcase, { label: "Image \u2014 enabled", children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User" }) }), _jsx(Showcase, { label: "Image \u2014 disabled", children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User", disabled: true }) }), _jsx(Showcase, { label: "Initials \u2014 enabled", children: _jsx(Avatar, { text: "SF", color: "primary" }) }), _jsx(Showcase, { label: "Initials \u2014 disabled", children: _jsx(Avatar, { text: "SF", color: "primary", disabled: true }) }), _jsx(Showcase, { label: "Icon \u2014 enabled", children: _jsx(Avatar, { Icon: IconUser, color: "highlight" }) }), _jsx(Showcase, { label: "Icon \u2014 disabled", children: _jsx(Avatar, { Icon: IconUser, color: "highlight", disabled: true }) })] }) })),
};
/**
 * Loading state. Renders a Skeleton placeholder that matches the configured
 * size and shape variant.
 */
export const Loading = {
    parameters: { controls: { disable: true } },
    render: () => (_jsx(Stack, { sx: { gap: 4 }, children: SHAPES.map(variant => (_jsx(Section, { title: `${variant.charAt(0).toUpperCase()}${variant.slice(1)}`, children: SIZES.map(size => (_jsx(Showcase, { label: size, children: _jsx(Avatar, { loading: true, size: size, variant: variant }) }, `${variant}-${size}`))) }, variant))) })),
};
/**
 * Avatars with an attached badge. Badges automatically downgrade to the `dot`
 * variant for small avatars or when no `badgeContent` is provided.
 */
export const WithBadge = {
    parameters: { controls: { disable: true } },
    render: () => (_jsxs(Stack, { sx: { gap: 4 }, children: [_jsx(Section, { title: "Dot badge (presence)", children: SIZES.map(size => (_jsx(Showcase, { label: size, children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User", size: size, withBadge: true, badgeProps: { color: 'success', variant: 'dot' } }) }, `dot-${size}`))) }), _jsx(Section, { title: "Number badge (notifications)", children: SIZES.map(size => (_jsx(Showcase, { label: size, children: _jsx(Avatar, { src: SAMPLE_IMAGE, alt: "User", size: size, withBadge: true, badgeProps: { badgeContent: 4, color: 'error' } }) }, `num-${size}`))) }), _jsxs(Section, { title: "Overflow & custom icons", children: [_jsx(Showcase, { label: "99+", children: _jsx(Avatar, { text: "SF", color: "primary", size: "large", withBadge: true, badgeProps: { badgeContent: 1000, color: 'error' } }) }), _jsx(Showcase, { label: "Bell", children: _jsx(Avatar, { Icon: IconBell, color: "highlight", size: "large", withBadge: true, badgeProps: { badgeContent: 12, color: 'warning' } }) }), _jsx(Showcase, { label: "Initials", children: _jsx(Avatar, { text: "AB", color: "success", size: "medium", withBadge: true, badgeProps: { badgeContent: 3, color: 'primary' } }) })] })] })),
};
