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-scrolltop';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Scroll Top',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Scroll Top affiche un bouton flottant permettant de remonter en haut de page d'un simple clic. Il apparaît automatiquement après avoir scrollé un certain nombre de pixels.

## Fonctionnalités

- Position fixe en bas à droite du viewport (ou du container parent)
- Apparition automatique après un seuil de scroll configurable
- Animation de fade-in/fade-out fluide
- Scroll smooth vers le haut de page
- Option pour masquer sur mobile
- Support du scroll dans un container parent (useWindow="false")
- Utilise spw-button avec icône chevron

## Cas d'usage

- Pages longues avec beaucoup de contenu
- Articles ou documentations détaillées
- Listes paginées ou infinies
- Containers scrollables (modales, panneaux latéraux)
- Amélioration de la navigation utilisateur
        `,
            },
        },
    },
};
export default meta;
const Template = args => {
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.height = '400px';
    container.style.overflow = 'auto';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    const content = document.createElement('div');
    content.style.height = '1500px';
    content.style.padding = '20px';
    content.style.background = 'linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%)';
    content.innerHTML = `
    <p style="margin-bottom: 20px;"><strong>Scrollez vers le bas pour voir apparaître le bouton Scroll Top.</strong></p>
    <p style="margin-bottom: 20px;">Le bouton apparaît après avoir scrollé ${args.threshold || 300}px.</p>
    ${Array(20)
        .fill(0)
        .map((_, i) => `<p style="margin-bottom: 15px; color: #666;">Paragraphe ${i + 1} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>`)
        .join('')}
  `;
    const element = document.createElement(elementTag);
    // Forcer useWindow à false pour la démo dans un container
    element.setAttribute('use-window', 'false');
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else if (val !== undefined && val !== null && val !== '' && key !== 'useWindow') {
            element.setAttribute(toKebabCase(key), val);
        }
    });
    container.appendChild(content);
    container.appendChild(element);
    return container;
};
export const Default = Template.bind({});
Default.args = {
    threshold: 300,
};
export const LowThreshold = Template.bind({});
LowThreshold.args = {
    threshold: 100,
};
export const HighThreshold = Template.bind({});
HighThreshold.args = {
    threshold: 500,
};
Default.parameters = {
    docs: {
        description: {
            story: `Bouton Scroll Top avec seuil par défaut de 300px. Apparaît après avoir scrollé 300 pixels et permet de remonter en haut de page avec un scroll fluide.`,
        },
        source: {
            code: `<spw-scrolltop></spw-scrolltop>`,
        },
    },
};
LowThreshold.parameters = {
    docs: {
        description: {
            story: `Bouton Scroll Top avec seuil bas de 100px. Apparaît rapidement après le début du scroll, utile pour les pages courtes ou quand on veut un accès rapide.`,
        },
        source: {
            code: `<spw-scrolltop threshold="100"></spw-scrolltop>`,
        },
    },
};
HighThreshold.parameters = {
    docs: {
        description: {
            story: `Bouton Scroll Top avec seuil élevé de 500px. N'apparaît qu'après un scroll significatif, évite d'encombrer l'interface sur les pages avec peu de contenu initial.`,
        },
        source: {
            code: `<spw-scrolltop threshold="500"></spw-scrolltop>`,
        },
    },
};
