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 } from "../../../utils/utils";
const elementTag = 'spw-toast';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Toast',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Toast affiche des notifications temporaires non-bloquantes pour informer l'utilisateur du résultat d'une action ou d'un événement système.

## Fonctionnalités

- 4 variantes visuelles : info, success, warning, alert
- Fermeture automatique configurable (ou permanente avec duration="0")
- Bouton de fermeture manuelle
- Lien optionnel avec callback
- Barre de progression indiquant le temps restant
- Icône personnalisable
- Navigation clavier accessible

## Cas d'usage

- Confirmation d'une action (sauvegarde, envoi, suppression)
- Notification d'erreur non-bloquante
- Avertissement sur une opération en cours
- Information système temporaire

---

## Utilisation en Vanilla JS

Le toast s'utilise via le composant spw-toast-controller à ajouter au body qui gère la pile de notifications.

### Déclaration HTML

\`\`\`html
<spw-toast-controller position="bottom-right"></spw-toast-controller>
\`\`\`

### Déclenchement programmatique

\`\`\`js
const controller = document.querySelector('spw-toast-controller');

// Toast simple
controller.create({
  heading: 'Enregistrement réussi',
  message: 'Vos modifications ont bien été sauvegardées.',
  variant: 'success',
});

// Toast avec lien
controller.create({
  heading: 'Mise à jour disponible',
  message: 'Une nouvelle version est disponible.',
  variant: 'info',
  linkLabel: 'En savoir plus',
  onLinkClick: () => console.log('lien cliqué'),
});

// Toast permanent (sans fermeture automatique)
controller.create({
  heading: 'Action requise',
  message: 'Veuillez confirmer votre adresse e-mail.',
  variant: 'warning',
  duration: 0,
});

// Fermer tous les toasts
controller.dismissAll();
\`\`\`

---

## Utilisation en Angular

Injectez le SpwToastService et utilisez les raccourcis ou la méthode create().

### Import du module

\`\`\`ts
import { SpwToastService } from '@spw-ds/spw-angular-library';
\`\`\`

### Usage dans un composant

\`\`\`ts
constructor(private toast: SpwToastService) {
  // Définir la position globale des toasts (optionnel, par défaut 'bottom-right')
  this.toast.setPosition('bottom-right');
}

// Raccourcis par variante
this.toast.success('Enregistrement réussi', { message: 'Vos données ont été sauvegardées.' });
this.toast.info('Information', { message: 'La liste a été mise à jour.' });
this.toast.warning('Attention', { message: 'Cette action est irréversible.' });
this.toast.error('Erreur', { message: 'Une erreur est survenue, veuillez réessayer.' });

// Création complète avec toutes les options
this.toast.create({
  heading: 'Nouvelle notification',
  message: 'Vous avez un nouveau message.',
  variant: 'info',
  duration: 0,
  dismissable: true,
  linkLabel: 'Voir le message',
  onLinkClick: () => this.openMessagePanel(),
});

// Fermer tous les toasts
this.toast.dismissAll();
\`\`\`

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/15cbdc-toast)
        `,
            },
        },
    },
};
export default meta;
/* -------------------------------------------------------------------------------------------------
 * TEMPLATE
 * ------------------------------------------------------------------------------------------------- */
function createController(storyFn, position = 'bottom-right') {
    // const wrapper = document.createElement('div');
    // wrapper.style.cssText = 'position: relative; min-height: 120px;';
    const controller = document.createElement('spw-toast-controller');
    controller.setAttribute('position', position);
    document.body.appendChild(controller);
    const button = document.createElement('spw-button');
    button.setAttribute('variant', 'primary');
    button.textContent = 'Afficher le toast';
    button.addEventListener('click', () => {
        const toast = storyFn();
        controller.create(toast);
    });
    // wrapper.appendChild(button);
    return button;
}
const Template = args => {
    return createController(() => (Object.assign({}, args)));
};
/* -------------------------------------------------------------------------------------------------
 * STORIES
 * ------------------------------------------------------------------------------------------------- */
export const Default = args => {
    // const wrapper = document.createElement('div');
    // wrapper.style.cssText = 'min-height: 120px;';
    const controller = document.createElement('spw-toast-controller');
    controller.setAttribute('position', 'bottom-right');
    document.body.appendChild(controller);
    const button = document.createElement('spw-button');
    button.setAttribute('variant', 'primary');
    button.textContent = 'Afficher le toast';
    button.addEventListener('click', () => {
        controller.create(Object.assign({}, args));
    });
    // wrapper.appendChild(button);
    return button;
};
Default.args = {
    heading: 'Titre du toast',
    message: 'Ceci est le message du toast.',
    variant: 'info',
    duration: 5000,
    dismissable: true,
};
// --- INFO ---
export const Info = Template.bind({});
Info.args = {
    heading: 'Information',
    message: 'La liste des demandes a été mise à jour.',
    variant: 'info',
};
// --- SUCCÈS ---
export const Succes = Template.bind({});
Succes.args = {
    heading: 'Enregistrement réussi',
    message: 'Vos modifications ont bien été sauvegardées.',
    variant: 'success',
};
// --- AVERTISSEMENT ---
export const Avertissement = Template.bind({});
Avertissement.args = {
    heading: 'Attention',
    message: 'Cette action modifiera les données de tous les utilisateurs.',
    variant: 'warning',
};
// --- ALERTE ---
export const Alerte = Template.bind({});
Alerte.args = {
    heading: 'Erreur',
    message: 'Une erreur est survenue. Veuillez réessayer.',
    variant: 'alert',
};
// --- PERMANENT ---
export const Permanent = Template.bind({});
Permanent.args = {
    heading: 'Action requise',
    message: 'Veuillez confirmer votre adresse e-mail pour continuer.',
    variant: 'warning',
    duration: 0,
    dismissable: true,
};
// --- AVEC LIEN ---
export const AvecLien = () => {
    // const wrapper = document.createElement('div');
    // wrapper.style.cssText = 'min-height: 120px;';
    const controller = document.createElement('spw-toast-controller');
    controller.setAttribute('position', 'bottom-right');
    document.body.appendChild(controller);
    const button = document.createElement('spw-button');
    button.setAttribute('variant', 'primary');
    button.textContent = 'Afficher le toast';
    button.addEventListener('click', () => {
        controller.create({
            heading: 'Mise à jour disponible',
            message: 'Une nouvelle version du formulaire est disponible.',
            variant: 'info',
            linkLabel: 'En savoir plus',
            onLinkClick: () => alert('Lien cliqué !'),
        });
    });
    // wrapper.appendChild(button);
    return button;
};
// --- SANS FERMETURE AUTOMATIQUE NI BOUTON ---
export const SansBoutonFermeture = Template.bind({});
SansBoutonFermeture.args = {
    heading: 'Chargement en cours…',
    message: 'Veuillez patienter pendant le traitement de votre demande.',
    variant: 'info',
    duration: 0,
    dismissable: false,
};
/* -------------------------------------------------------------------------------------------------
 * DESCRIPTIONS
 * ------------------------------------------------------------------------------------------------- */
Default.parameters = {
    docs: {
        description: {
            story: `Toast configurable via les contrôles. Permet d'explorer toutes les combinaisons de props disponibles.`,
        },
    },
};
Info.parameters = {
    docs: {
        description: {
            story: `Toast informatif pour notifier l'utilisateur d'un événement neutre. Cas d'usage : mise à jour de liste, synchronisation, chargement terminé.`,
        },
    },
};
Succes.parameters = {
    docs: {
        description: {
            story: `Toast de succès pour confirmer qu'une action s'est bien déroulée. Cas d'usage : sauvegarde, envoi de formulaire, suppression réussie.`,
        },
    },
};
Avertissement.parameters = {
    docs: {
        description: {
            story: `Toast d'avertissement pour signaler une situation à risque sans bloquer l'utilisateur. Cas d'usage : action irréversible, impact étendu, données manquantes.`,
        },
    },
};
Alerte.parameters = {
    docs: {
        description: {
            story: `Toast d'alerte pour signaler une erreur non-bloquante. Cas d'usage : échec réseau, erreur de validation serveur, timeout.`,
        },
    },
};
Permanent.parameters = {
    docs: {
        description: {
            story: `Toast sans fermeture automatique (duration="0"). Reste visible jusqu'à ce que l'utilisateur le ferme manuellement. Cas d'usage : action requise, confirmation e-mail, alerte critique.`,
        },
    },
};
AvecLien.parameters = {
    docs: {
        description: {
            story: `Toast avec un lien cliquable. Le callback onLinkClick est déclenché au clic. Cas d'usage : redirection vers détail, ouverture d'une modal, action complémentaire.`,
        },
    },
};
SansBoutonFermeture.parameters = {
    docs: {
        description: {
            story: `Toast sans bouton de fermeture et sans timer. Utile pour indiquer un processus en cours. À utiliser avec parcimonie — penser à le fermer programmatiquement via dismiss().`,
        },
    },
};
