let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-avatar';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Avatar',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Avatar permet d'afficher une représentation visuelle d'un utilisateur, soit sous forme d'image, soit avec ses initiales. Il peut être utilisé seul ou combiné avec d'autres composants comme un dropdown pour créer un menu utilisateur.

## Fonctionnalités

- Affichage d'image de profil ou d'initiales
- Trois tailles : small (30px), medium (40px), large (50px)
- Badge de notification (bubble) avec compteur
- Combinable avec spw-dropdown pour menu utilisateur

## Cas d'usage

- Photo de profil utilisateur
- Avatar dans liste de participants
- Menu utilisateur avec dropdown
- Indicateur de présence avec badge
- Liste de contributeurs
        `,
            },
        },
    },
};
export default meta;
const Template = args => {
    const element = document.createElement(elementTag);
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else if (val !== undefined && val !== null && val !== '') {
            element.setAttribute(toKebabCase(key), val);
        }
    });
    return element;
};
export const WithInitials = Template.bind({});
WithInitials.args = {
    initials: 'JD',
    size: 'medium',
    shape: 'rounded',
};
export const WithImage = Template.bind({});
WithImage.args = {
    image: 'https://i.pravatar.cc/150?img=3',
    size: 'medium',
    shape: 'rounded',
};
export const Small = Template.bind({});
Small.args = {
    initials: 'SM',
    size: 'small',
    shape: 'rounded',
};
export const Large = Template.bind({});
Large.args = {
    initials: 'LG',
    size: 'large',
    shape: 'rounded',
};
export const WithBubble = Template.bind({});
WithBubble.args = {
    initials: 'JD',
    size: 'medium',
    shape: 'rounded',
    bubble: '3',
};
const DropdownTemplate = args => {
    const container = document.createElement('div');
    container.innerHTML = /* HTML */ `
    <spw-dropdown direction="bottom" content-width="200">
      <spw-avatar
        initials="${args.initials || 'JD'}"
        size="${args.size || 'medium'}"
        shape="${args.shape || 'rounded'}"
        ${args.bubble ? `bubble="${args.bubble}"` : ''}
        clickable
      ></spw-avatar>
      <div slot="dropdownContent">
        <spw-dropdown-item>Mon profil</spw-dropdown-item>
        <spw-dropdown-item>Paramètres</spw-dropdown-item>
        <spw-dropdown-item>Déconnexion</spw-dropdown-item>
      </div>
    </spw-dropdown>
  `;
    return container;
};
export const WithDropdown = DropdownTemplate.bind({});
WithDropdown.args = {
    initials: 'JD',
    size: 'medium',
    shape: 'rounded',
    bubble: '5',
};
WithInitials.parameters = {
    docs: {
        description: {
            story: `Avatar avec initiales sur fond par défaut. Utilisé quand aucune photo de profil n'est disponible. Les initiales sont automatiquement en majuscules.`,
        },
    },
};
WithImage.parameters = {
    docs: {
        description: {
            story: `Avatar avec image de profil. L'image est affichée en background-cover pour s'adapter à la forme du conteneur.`,
        },
    },
};
Small.parameters = {
    docs: {
        description: {
            story: `Avatar de petite taille (30px). Idéal pour les listes compactes ou les espaces restreints.`,
        },
    },
};
Large.parameters = {
    docs: {
        description: {
            story: `Avatar de grande taille (50px). Utilisé pour les profils mis en avant ou les pages de détail utilisateur.`,
        },
    },
};
WithBubble.parameters = {
    docs: {
        description: {
            story: `Avatar avec badge de notification. Le badge affiche un compteur (notifications, messages non lus, etc.).`,
        },
    },
};
WithDropdown.parameters = {
    docs: {
        description: {
            story: `Avatar combiné avec un dropdown pour créer un menu utilisateur. Exemple classique : menu de profil dans un header.`,
        },
    },
};
