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

Le composant Date Picker permet aux utilisateurs de sélectionner une date via un calendrier interactif ou une saisie manuelle. Il supporte les sélections simples, les dates avec contraintes et les plages de dates.

## Fonctionnalités

- Calendrier interactif pour sélection visuelle
- Saisie manuelle de date au format JJ/MM/AAAA
- Contraintes de dates min et max
- Mode plage pour sélectionner début et fin
- Synchronisation automatique des plages
- État désactivé

## Cas d'usage

- Sélection de date de naissance
- Réservations et planifications
- Filtres de dates dans recherches
- Plages de dates pour rapports
- Formulaires de demandes avec dates

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/314e53-choix-de-date-date-picker)
        `,
            },
        },
    },
};
export default meta;
// Stories template
const Template = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    return element;
};
// Default
export const Default = Template.bind({});
Default.args = {
    label: 'Date de naissance',
    placeholder: 'JJ/MM/AAAA',
};
// WithValue
export const WithValue = Template.bind({});
WithValue.args = {
    label: 'Date avec valeur',
    value: '2025-06-30',
    placeholder: 'JJ/MM/AAAA',
};
// WithConstraints
export const WithConstraints = Template.bind({});
WithConstraints.args = {
    label: 'Date limitée',
    placeholder: 'JJ/MM/AAAA',
    min: '2025-01-01',
    max: '2025-12-31',
};
// Disabled
export const Disabled = Template.bind({});
Disabled.args = {
    label: 'Date désactivée',
    placeholder: 'Non disponible',
    disabled: true,
};
// Range template (nécessite deux datepickers)
const RangeTemplate = args => {
    const container = document.createElement('div');
    // Créer le datepicker de début
    const startPicker = document.createElement(elementTag);
    startPicker.setAttribute('range', 'true');
    startPicker.setAttribute('range-id', args.rangeId || '1');
    startPicker.setAttribute('is-start', 'true');
    startPicker.setAttribute('label', args.startLabel || 'Date de début');
    startPicker.setAttribute('placeholder', args.startPlaceholder || 'Choisissez une date de début');
    if (args.startValue)
        startPicker.setAttribute('value', args.startValue);
    startPicker.classList.add('mb-3');
    // Créer le datepicker de fin
    const endPicker = document.createElement(elementTag);
    endPicker.setAttribute('range', 'true');
    endPicker.setAttribute('range-id', args.rangeId || '1');
    endPicker.setAttribute('label', args.endLabel || 'Date de fin');
    endPicker.setAttribute('placeholder', args.endPlaceholder || 'Choisissez une date de fin');
    if (args.endValue)
        endPicker.setAttribute('value', args.endValue);
    container.appendChild(startPicker);
    container.appendChild(endPicker);
    return container;
};
// DateRange
export const DateRange = RangeTemplate.bind({});
DateRange.args = {
    rangeId: 'range-story-1',
    startLabel: 'Date de début',
    startPlaceholder: 'Choisissez une date de début',
    endLabel: 'Date de fin',
    endPlaceholder: 'Choisissez une date de fin',
};
// DateRangeWithValues
export const DateRangeWithValues = RangeTemplate.bind({});
DateRangeWithValues.args = {
    rangeId: 'range-story-2',
    startLabel: 'Date de début',
    startPlaceholder: 'Choisissez une date de début',
    startValue: '2025-06-01',
    endLabel: 'Date de fin',
    endPlaceholder: 'Choisissez une date de fin',
    endValue: '2025-06-15',
};
Default.parameters = {
    docs: {
        description: {
            story: `Date Picker par défaut avec label et placeholder. Calendrier interactif et saisie manuelle possibles. Cas d'usage : date de naissance, formulaires de demande, sélection de date simple.`,
        },
    },
};
WithValue.parameters = {
    docs: {
        description: {
            story: `Date Picker avec valeur pré-remplie. Date initiale définie pour modification ou affichage. Cas d'usage : édition de formulaires existants, dates par défaut, affichage de dates enregistrées.`,
        },
    },
};
WithConstraints.parameters = {
    docs: {
        description: {
            story: `Date Picker avec contraintes de dates min et max. Limite les dates sélectionnables à une plage définie. Cas d'usage : réservations futures, dates limitées à une année, périodes de validité.`,
        },
    },
};
Disabled.parameters = {
    docs: {
        description: {
            story: `Date Picker en état désactivé. Champ non modifiable pour affichage uniquement. Cas d'usage : dates fixes non modifiables, affichage de dates historiques, champs en lecture seule.`,
        },
    },
};
DateRange.parameters = {
    docs: {
        description: {
            story: `Date Picker en mode plage avec deux champs synchronisés. Sélection de date de début et de fin liées. Cas d'usage : réservations avec durée, filtres de périodes, rapports sur plages temporelles, séjours ou locations.`,
        },
    },
};
DateRangeWithValues.parameters = {
    docs: {
        description: {
            story: `Date Picker en mode plage avec valeurs pré-remplies. Plage de dates existante affichée et modifiable. Cas d'usage : édition de réservations, modification de filtres existants, affichage de périodes enregistrées.`,
        },
    },
};
