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-search-field';
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), { items: {
        control: 'object',
        description: "Liste des suggestions de recherche (array d'objets avec label et category optionnel)",
        table: {
            type: { summary: 'SearchItem[]' },
        },
    } });
const meta = {
    title: 'Composants/Champ de recherche (input search)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Search Field permet aux utilisateurs d'effectuer des recherches avec autocomplétion et suggestions. Il propose des résultats en temps réel pendant la saisie et peut inclure un bouton de soumission.

## Variantes disponibles

- **default** : Champ standard avec suggestions
- **rounded** : Version arrondie pour hero banners

## Fonctionnalités

- Autocomplétion avec suggestions dynamiques
- Bouton de soumission optionnel
- Submit du formulaire parent au Enter
- Hidden input pour récupérer la valeur dans un formulaire
- Lien vers tous les résultats
- Tailles configurables (small, medium, large)
- État désactivé
- Label et texte d'assistance
- Catégorisation des résultats
- Champ requis

## Cas d'usage

- Recherche globale dans applications
- Barre de recherche dans hero banners
- Recherche avec suggestions dans formulaires
- Filtrage avec autocomplétion
- Recherche de contenu ou produits
- Moteur de recherche interne

---

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/9384eb-champ-de-recherche-search-input)

---

## Utilisation en Vanilla JavaScript

Les Web Components fonctionnent différemment des éléments HTML natifs. Voici les points importants à retenir :

### Passer des données complexes (items)

Les attributs HTML ne supportent que des chaînes de caractères. Pour passer un tableau d'objets comme items, vous devez assigner la propriété JavaScript directement :

\`\`\`html
<spw-search-field
  name="search"
  placeholder="Rechercher..."
  has-submit-button="true"
></spw-search-field>

<script>
  const searchField = document.querySelector('spw-search-field');

  // ❌ Ne fonctionne PAS (les attributs sont des strings)
  // searchField.setAttribute('items', '[{...}]');

  // ✅ Assigner directement la propriété JavaScript
  searchField.items = [
    { label: 'Primes habitation', value: 'primes-habitation', category: 'Services' },
    { label: 'Primes énergie', value: 'primes-energie', category: 'Services' },
    { label: 'Emploi et formation', value: 'emploi-formation', category: 'Travail' }
  ];
</script>
\`\`\`

### Structure de l'objet SearchItem

Chaque élément du tableau items doit respecter l'interface SearchItem :

| Propriété | Type | Requis | Description |
|-----------|------|--------|-------------|
| \`label\` | string | ✅ | Texte affiché dans la suggestion |
| \`value\` | string | ✅ | Valeur associée à l'item (retournée dans les events) |
| \`category\` | string | ❌ | Catégorie pour regrouper les suggestions |
| \`url\` | string | ❌ | URL de redirection si l'item est cliqué |
| \`disabled\` | boolean | ❌ | Désactive l'item (non sélectionnable) |

\`\`\`typescript
interface SearchItem {
  label: string;
  value: string;
  category?: string;
  url?: string;
  disabled?: boolean;
}
\`\`\`

Exemple complet :

\`\`\`javascript
searchField.items = [
  {
    label: 'Primes habitation',
    value: 'primes-habitation',
    url: '/services/primes-habitation',
    category: 'Services'
  },
  {
    label: 'Environnement',
    value: 'environnement',
    category: 'Nature',
    disabled: true  // Non sélectionnable
  }
];
\`\`\`

### Écouter les événements

Les Web Components n'acceptent pas les callbacks inline HTML comme onclick ou onchange. Vous devez utiliser addEventListener :

\`\`\`html
<spw-search-field name="search" placeholder="Rechercher..."></spw-search-field>

<script>
  const searchField = document.querySelector('spw-search-field');

  // ❌ Ne fonctionne PAS (callbacks HTML natifs)
  // <spw-search-field onchange="handleChange()">

  // ✅ Utiliser addEventListener
  searchField.addEventListener('spwValueChange', (event) => {
    console.log('Valeur changée :', event.detail);
  });

  searchField.addEventListener('spwOptionSelected', (event) => {
    console.log('Option sélectionnée :', event.detail);
  });

  searchField.addEventListener('spwSubmit', (event) => {
    console.log('Formulaire soumis :', event.detail);
  });
</script>
\`\`\`

### Soumission de formulaire

Il est possible de soumettre le formulaire au Enter dans le champ. Un hidden input est automatiquement créé pour transmettre la valeur via FormData :

\`\`\`html
<form action="/search" method="GET">
  <spw-search-field
    name="q"
    placeholder="Rechercher..."
    has-submit-button="true"
  ></spw-search-field>
</form>

<script>
  const form = document.querySelector('form');

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    console.log('Recherche :', formData.get('q'));
  });
</script>
\`\`\`

### Appeler les méthodes du composant

Le composant expose des méthodes publiques que vous pouvez appeler :

\`\`\`javascript
const searchField = document.querySelector('spw-search-field');

// Vider le champ
await searchField.resetInput();

// Mettre le focus sur le champ
await searchField.setFocus();
\`\`\`
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = false;
    const slottedLabel = 'content';
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    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), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
const defaultItems = [
    { label: 'Primes habitation', value: 'primes-habitation', url: '/services/primes-habitation', category: 'Services' },
    { label: 'Primes énergie', value: 'primes-energie', url: '/services/primes-energie', category: 'Services' },
    { label: 'Aides au logement', value: 'aides-logement', url: '/services/aides-logement', category: 'Services' },
    { label: 'Emploi et formation', value: 'emploi-formation', url: '/travail/emploi-formation', category: 'Travail' },
    { label: 'Mobilité durable', value: 'mobilite', url: '/transport/mobilite', category: 'Transport' },
    { label: 'Environnement', value: 'environnement', url: '/nature/environnement', category: 'Nature', disabled: true },
];
export const Default = Template.bind({});
Default.args = {
    size: 'medium',
    name: 'search-basic',
    placeholder: 'Rechercher...',
    items: defaultItems,
};
Default.parameters = {
    docs: {
        description: {
            story: `Champ de recherche par défaut avec suggestions. Affiche les résultats correspondants pendant la saisie. Cas d'usage : recherche simple dans applications, filtrage avec autocomplétion, recherche de contenu.`,
        },
    },
};
export const ViewMore = Template.bind({});
ViewMore.args = {
    size: 'medium',
    name: 'search-with-links',
    placeholder: 'Rechercher une page...',
    viewAllResults: 'Voir tous les résultats',
    viewAllResultsLink: '/search',
    items: defaultItems,
};
ViewMore.parameters = {
    docs: {
        description: {
            story: 'Champ de recherche avec des éléments cliquables et un lien vers tous les résultats.',
        },
    },
};
export const FormSubmission = Template.bind({});
FormSubmission.args = {
    size: 'medium',
    name: 'q',
    placeholder: 'Exemple : primes habitation...',
    hasSubmitButton: true,
    items: defaultItems,
};
FormSubmission.parameters = {
    docs: {
        description: {
            story: 'Formulaire avec champ de recherche incluant un bouton de soumission (loupe). La valeur est récupérée via FormData.',
        },
    },
};
export const HeroRounded = Template.bind({});
HeroRounded.args = {
    size: 'large',
    name: 'search-hero',
    placeholder: 'Que cherchez-vous ?',
    hasSubmitButton: true,
    isRounded: true,
    viewAllResults: 'Voir plus de résultats',
    viewAllResultsLink: '/search',
    items: defaultItems,
};
HeroRounded.parameters = {
    docs: {
        description: {
            story: 'Version grande taille avec coins arrondis, idéale pour les hero banners.',
        },
    },
};
export const WithLabelAndHelp = Template.bind({});
WithLabelAndHelp.args = {
    size: 'medium',
    name: 'search-required',
    label: 'Recherche obligatoire',
    placeholder: 'Saisissez votre recherche...',
    required: true,
    assistiveText: 'Veuillez saisir au moins 3 caractères pour lancer la recherche.',
    items: defaultItems,
};
WithLabelAndHelp.parameters = {
    docs: {
        description: {
            story: "Champ de recherche requis avec un texte d'aide affiché sous le champ.",
        },
    },
};
export const Disabled = Template.bind({});
Disabled.args = {
    size: 'medium',
    name: 'search-disabled',
    placeholder: 'Champ désactivé...',
    disabled: true,
    items: defaultItems,
};
Disabled.parameters = {
    docs: {
        description: {
            story: 'État désactivé du composant.',
        },
    },
};
