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";
import { action } from "@storybook/addon-actions";
const elementTag = 'spw-custom-select';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Champ de sélection personnalisé (Custom Select)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Custom Select est une version avancée du select standard, offrant recherche intégrée, multi-sélection et messages de validation enrichis. Idéal pour les listes longues ou les sélections complexes.

## Fonctionnalités

- Sélection simple ou multiple
- Messages d'état (erreur, succès, warning)
- Label et placeholder personnalisables
- Texte d'assistance avec icône
- Liste d'options dynamiques via JSON
- Événements personnalisés pour les changements

## Cas d'usage

- Sélection de tags ou catégories multiples
- Formulaires avec listes longues nécessitant recherche
- Filtres avancés avec multi-critères
- Configuration de paramètres complexes
- Sélection dans une liste étendue

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)
        `,
            },
        },
    },
};
export default meta;
/* -------------------------------------------------------------------------------------------------
 * TEMPLATE STORY
 * ------------------------------------------------------------------------------------------------- */
const Template = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    // Application des props du story aux attributs du composant
    Object.entries(args).forEach(([key, val]) => {
        if (val === undefined || val === null)
            return;
        if (key === 'items' && Array.isArray(val)) {
            // Les arrays doivent être assignés directement à la propriété, pas comme attribut
            element.items = val;
        }
        else if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), String(val));
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.addEventListener('valueChanged', (event) => {
        action('valueChanged')(event.detail);
    });
    element.addEventListener('optionCreated', (event) => {
        action('optionCreated')(event.detail);
    });
    element.addEventListener('optionRemoved', (event) => {
        action('optionRemoved')(event.detail);
    });
    return element;
};
/* -------------------------------------------------------------------------------------------------
 * STORIES
 * ------------------------------------------------------------------------------------------------- */
// --- STORY PAR DÉFAUT ---
export const Default = Template.bind({});
Default.args = {
    label: 'Sélection simple',
    name: 'custom-select',
    placeholder: 'Choisissez une option',
    hint: "Ceci est un texte d'aide",
    showHintIcon: false,
    size: 'medium',
    required: false,
    isSearch: false,
    multiple: false,
    items: [
        { label: 'Option 1', value: '1', disabled: true },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' },
    ],
};
// --- MULTI-SÉLECTION ---
export const Multiple = Template.bind({});
Multiple.args = Object.assign(Object.assign({}, Default.args), { label: 'Sélection multiple', multiple: true, placeholder: 'Sélectionnez une ou plusieurs options', items: [
        { label: 'Pomme', value: 'apple' },
        { label: 'Banane', value: 'banana' },
        { label: 'Cerise', value: 'cherry' },
        { label: 'Mangue', value: 'mango' },
    ] });
// --- AVEC RECHERCHE ---
export const AvecRecherche = Template.bind({});
AvecRecherche.args = Object.assign(Object.assign({}, Default.args), { label: 'Sélection avec recherche', isSearch: true, placeholder: 'Rechercher une option...', items: [
        { label: 'Paris', value: 'paris' },
        { label: 'Londres', value: 'london' },
        { label: 'Berlin', value: 'berlin' },
        { label: 'Madrid', value: 'madrid' },
        { label: 'Rome', value: 'rome' },
    ] });
// --- AVEC ERREUR ---
export const AvecErreur = Template.bind({});
AvecErreur.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec erreur', error: 'Veuillez sélectionner une option valide' });
// --- AVEC MESSAGE DE SUCCÈS ---
export const AvecSucces = Template.bind({});
AvecSucces.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec succès', success: 'Sélection enregistrée avec succès !' });
// --- AVEC WARNING ---
export const AvecWarning = Template.bind({});
AvecWarning.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec avertissement', warning: 'Cette option peut avoir des conséquences inattendues' });
Default.parameters = {
    docs: {
        description: {
            story: `Custom Select par défaut avec sélection simple. Liste déroulante stylisée avec options définies via JSON. Cas d'usage : sélection dans listes moyennes, formulaires nécessitant un style cohérent, alternatives au select natif.`,
        },
    },
};
Multiple.parameters = {
    docs: {
        description: {
            story: `Custom Select avec sélection multiple activée. Les options sélectionnées s'affichent comme tags sous le champ. Cas d'usage : sélection de tags, catégories multiples, destinataires multiples, filtres combinés.`,
        },
    },
};
AvecRecherche.parameters = {
    docs: {
        description: {
            story: `Custom Select avec recherche intégrée. Filtrage en temps réel des options pendant la saisie. Cas d'usage : listes longues de villes ou pays, recherche de contacts, sélection dans catalogues étendus.`,
        },
    },
};
AvecErreur.parameters = {
    docs: {
        description: {
            story: `Custom Select en état d'erreur avec message. Affichage visuel distinctif pour indiquer une validation échouée. Cas d'usage : validation de formulaire, indication d'erreur après soumission, champs requis non remplis.`,
        },
    },
};
AvecSucces.parameters = {
    docs: {
        description: {
            story: `Custom Select avec message de succès. Confirmation visuelle d'une sélection valide ou enregistrée. Cas d'usage : feedback positif après validation, confirmation d'enregistrement, indication de sélection correcte.`,
        },
    },
};
AvecWarning.parameters = {
    docs: {
        description: {
            story: `Custom Select avec avertissement. Message d'alerte pour signaler une situation particulière sans bloquer l'action. Cas d'usage : options avec conséquences importantes, choix nécessitant attention, informations complémentaires critiques.`,
        },
    },
};
// --- CRÉATION À LA VOLÉE (MULTIPLE) ---
export const AllowCreateMultiple = Template.bind({});
AllowCreateMultiple.args = Object.assign(Object.assign({}, Default.args), { label: 'Mots-clés', multiple: true, isSearch: true, allowCreate: true, isClear: true, searchPlaceholder: 'Rechercher ou créer un mot-clé...', noResultsText: 'Aucun mot-clé existant.', placeholder: 'Sélectionnez ou créez des mots-clés', hint: 'Saisissez un mot-clé absent de la liste et cliquez sur + pour le créer.', showHintIcon: false, items: [
        { label: 'Angular', value: 'angular' },
        { label: 'React', value: 'react' },
        { label: 'Stencil', value: 'stencil' },
        { label: 'Vue', value: 'vue' },
        { label: 'Svelte', value: 'svelte' },
    ] });
AllowCreateMultiple.parameters = {
    docs: {
        description: {
            story: `Custom Select avec création d'options à la volée et sélection multiple. Lorsque la saisie ne correspond à aucune option existante, un bouton + apparaît pour ajouter l'option directement. Les options créées sont marquées d'une icône de suppression. Les events optionCreated et optionRemoved sont émis pour permettre la synchronisation avec le backend. Cas d'usage : saisie de tags libres, mots-clés personnalisés, listes extensibles.`,
        },
    },
};
