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, extractArgTypes, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-header';
const subComponentTags = ['spw-header-lang', 'spw-header-navigation', 'spw-header-navigation-item', 'spw-header-navigation-dropdown', 'spw-header-persona'];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: 'Organismes/En-tête de site (header)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Header est la section supérieure d'une page web. Il contient le logo, la navigation principale, la recherche, le sélecteur de langue et le sélecteur de persona. C'est un élément crucial pour l'orientation et l'accessibilité du site.

## Structure

Le composant se compose de plusieurs sous-éléments :
- **spw-header** : Conteneur principal avec gestion responsive
- **spw-header-navigation** : Menu de navigation principal
- **spw-header-navigation-item** : Item de menu avec support dropdown
- **spw-header-navigation-dropdown** : Sous-menu déroulant
- **spw-header-lang** : Sélecteur de langue
- **spw-header-persona** : Sélecteur de profil utilisateur

## Slots

- Support des slots logo, logo-mobile, top-left, right, search

## Fonctionnalités

- Navigation multi-niveaux (jusqu'à 3 niveaux)
- Recherche intégrée avec suggestions
- Menu mobile responsive avec hamburger
- Support des boutons d'action supplémentaires
- Gestion automatique des états actifs
- Accessibilité complète (ARIA, navigation clavier)

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slotArgs) {
    return /* HTML */ `
    <div slot="top-left">
      <spw-header-persona>
        <option data-link="#" selected value="citoyen">Citoyen</option>
        <option data-link="#" value="entreprise">Entreprise</option>
        <option data-link="#" value="pouvoirs-locaux">Pouvoirs locaux</option>
        <option data-link="#" value="non-marchands">Non-marchands</option>
      </spw-header-persona>
    </div>

    <div slot="right">
      <spw-header-lang>
        <option data-link="#" selected value="fr">Fr</option>
        <option data-link="#" value="nl">Nl</option>
        <option data-link="#" value="en">En</option>
        <option data-link="#" value="de">De</option>
      </spw-header-lang>
    </div>

    <div slot="search">
      <spw-search-field
        class="mb-4"
        size="medium"
        name="search"
        items='[
                    {"url": "http://google.com", "label": "Banane"},
                    {"label": "Pomme"},
                    {"label": "Poire"},
                    {"label": "Cerise"},
                    {"label": "Raisin"}
                  ]'
        placeholder="Exemple : un mot-clé..."
      ></spw-search-field>
      <h2 class="spw-ds-typography-heading-04 mb-4">Suggestions de pages :</h2>
      <spw-group orientation="vertical">
        <spw-link variant="tertiary">Démarches</spw-link>
        <spw-link variant="tertiary">Réforme primes énergie</spw-link>
        <spw-link variant="tertiary">Jobs</spw-link>
        <spw-link variant="tertiary">Trafiroutes</spw-link>
      </spw-group>
    </div>

    <spw-header-navigation>
      <spw-header-navigation-item is-active="${slotArgs.isActive}">
        <a href="#">Rubrique 1</a>

        <spw-header-navigation-dropdown>
          <spw-header-navigation-item>
            <a href="#">Sous-rubrique niveau 2</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Sous-rubrique niveau 3</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Sous-rubrique niveau 3</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Sous-rubrique</a>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Sous-rubrique</a>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Sous-rubrique</a>
          </spw-header-navigation-item>
        </spw-header-navigation-dropdown>
      </spw-header-navigation-item>

      <spw-header-navigation-item>
        <a href="#">Rubrique 2</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Rubrique 3</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Rubrique 4</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Rubrique 5</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Rubrique 6</a>
      </spw-header-navigation-item>
    </spw-header-navigation>
  `;
}
function htmlContentVariant2(slotArgs) {
    return /* HTML */ `
    <div slot="right">
      <spw-header-lang>
        <option data-link="#" selected value="fr">Fr</option>
        <option data-link="#" value="nl">Nl</option>
      </spw-header-lang>
    </div>

    <div slot="search">
      <spw-search-field class="mb-4" size="medium" name="search" placeholder="Rechercher..."></spw-search-field>
      <h2 class="spw-ds-typography-heading-04 mb-4">Accès rapide :</h2>
      <spw-group orientation="vertical">
        <spw-link variant="tertiary">Contact</spw-link>
        <spw-link variant="tertiary">FAQ</spw-link>
        <spw-link variant="tertiary">Services en ligne</spw-link>
      </spw-group>
    </div>

    <spw-header-navigation
      extra-button="true"
      extra-button-text="Bouton"
      extra-button-href="#"
      extra-button-target="_blank"
      extra-button-icon="fa-arrow-right"
      extra-button-variant="primary"
    >
      <spw-header-navigation-item is-active="${slotArgs.isActive}">
        <a href="#">Accueil</a>
      </spw-header-navigation-item>

      <spw-header-navigation-item>
        <a href="#">Services</a>
        <spw-header-navigation-dropdown>
          <spw-header-navigation-item>
            <a href="#">Service 1</a>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Service 2</a>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Service 3</a>
          </spw-header-navigation-item>
        </spw-header-navigation-dropdown>
      </spw-header-navigation-item>

      <spw-header-navigation-item>
        <a href="#">Documentation</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Contact</a>
      </spw-header-navigation-item>
    </spw-header-navigation>
  `;
}
function htmlContentVariant3(slotArgs) {
    return /* HTML */ `
    <div slot="logo">
      <img src="https://placehold.co/200x80/EEE/31343C?text=Logo" alt="Logo personnalisé" />
    </div>
    <div slot="logo-mobile">
      <img src="https://placehold.co/200x80/EEE/31343C?text=Logo" alt="Logo personnalisé" />
    </div>
    <div slot="top-left">
      <spw-header-persona>
        <option data-link="#" selected value="particulier">Particulier</option>
        <option data-link="#" value="professionnel">Professionnel</option>
        <option data-link="#" value="administration">Administration</option>
      </spw-header-persona>
    </div>

    <div slot="right">
      <spw-header-lang>
        <option data-link="#" selected value="fr">Fr</option>
        <option data-link="#" value="nl">Nl</option>
        <option data-link="#" value="en">En</option>
      </spw-header-lang>
    </div>

    <div slot="search">
      <spw-search-field
        class="mb-4"
        size="medium"
        name="search"
        items='[
                    {"url": "#", "label": "Formulaires"},
                    {"url": "#", "label": "Aides et subsides"},
                    {"url": "#", "label": "Permis"},
                    {"url": "#", "label": "Attestations"}
                  ]'
        placeholder="Que recherchez-vous ?"
      ></spw-search-field>
      <h2 class="spw-ds-typography-heading-04 mb-4">Les plus consultés :</h2>
      <spw-group orientation="vertical">
        <spw-link variant="tertiary">Mon compte</spw-link>
        <spw-link variant="tertiary">Primes habitation</spw-link>
        <spw-link variant="tertiary">Mobilité et transport</spw-link>
        <spw-link variant="tertiary">Environnement</spw-link>
        <spw-link variant="tertiary">Emploi et formation</spw-link>
      </spw-group>
    </div>

    <spw-header-navigation>
      <spw-header-navigation-item is-active="${slotArgs.isActive}">
        <a href="#">Thématiques</a>

        <spw-header-navigation-dropdown>
          <spw-header-navigation-item>
            <a href="#">Aménagement du territoire</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Urbanisme</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Patrimoine</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Lotissements</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Mobilité</a>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Environnement</a>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Économie</a>
          </spw-header-navigation-item>
        </spw-header-navigation-dropdown>
      </spw-header-navigation-item>

      <spw-header-navigation-item>
        <a href="#">Démarches</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Actualités</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">À propos</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Mon espace</a>
      </spw-header-navigation-item>
    </spw-header-navigation>
  `;
}
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);
        }
    });
    element.innerHTML = htmlContent(args);
    return element;
};
const TemplateVariant2 = 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);
        }
    });
    element.innerHTML = htmlContentVariant2(args);
    return element;
};
const TemplateVariant3 = 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);
        }
    });
    element.innerHTML = htmlContentVariant3(args);
    return element;
};
export const Default = Template.bind({});
Default.args = {
    isActive: false,
    siteTitle: 'Titre du site',
    borderColor: 'var(--spw-ds-primary)',
};
Default.parameters = {
    docs: {
        description: {
            story: `
Header complet avec toutes les fonctionnalités : sélecteur de persona, navigation multi-niveaux (jusqu'à 3 niveaux), recherche avec suggestions, et sélecteur de langue.

Cas d'usage : header principal d'un site institutionnel avec navigation complexe. Inclut 6 rubriques de navigation dont une avec sous-menus imbriqués. La recherche propose des suggestions de pages populaires.
      `,
        },
    },
};
export const Variant2Simplifie = TemplateVariant2.bind({});
Variant2Simplifie.args = {
    isActive: false,
    siteTitle: 'Titre du site',
    borderColor: 'var(--spw-ds-primary)',
};
Variant2Simplifie.storyName = 'Variante bouton supplémentaire';
Variant2Simplifie.parameters = {
    docs: {
        description: {
            story: `
Header simplifié avec bouton d'action supplémentaire dans la navigation. Idéal pour mettre en avant une action principale (inscription, connexion, téléchargement).

Le bouton extra peut être configuré avec icône, variant, lien et target. Navigation simplifiée avec 4 rubriques dont une avec dropdown.
      `,
        },
    },
};
export const Variant3Etendu = TemplateVariant3.bind({});
Variant3Etendu.args = {
    isActive: false,
    siteTitle: '',
    hasWallonieLogo: false,
    borderColor: 'var(--spw-ds-tertiary)',
};
Variant3Etendu.storyName = 'Variante logo personnalisé';
Variant3Etendu.parameters = {
    docs: {
        description: {
            story: `
Header avec logo personnalisé (slots logo et logo-mobile). Permet d'utiliser un logo custom au lieu du logo Wallonie par défaut.

Configuration étendue avec sélecteur de persona à 3 options, recherche avec items prédéfinis, et navigation thématique. Parfait pour les sites spécialisés ou portails métiers nécessitant une identité visuelle distincte.
      `,
        },
    },
};
function htmlContentMegamenu(slotArgs) {
    return /* HTML */ `
    <div slot="top-left">
      <spw-header-persona>
        <option data-link="#" selected value="citoyen">Citoyen</option>
        <option data-link="#" value="entreprise">Entreprise</option>
        <option data-link="#" value="pouvoirs-locaux">Pouvoirs locaux</option>
      </spw-header-persona>
    </div>

    <div slot="right">
      <spw-header-lang>
        <option data-link="#" selected value="fr">Fr</option>
        <option data-link="#" value="nl">Nl</option>
        <option data-link="#" value="en">En</option>
      </spw-header-lang>
    </div>

    <div slot="search">
      <spw-search-field class="mb-4" size="medium" name="search" placeholder="Rechercher..."></spw-search-field>
    </div>

    <spw-header-navigation>
      <spw-header-navigation-item variant="megamenu" is-active="${slotArgs.isActive}">
        <a href="#">Thématiques</a>

        <spw-header-navigation-dropdown view-more-text="Toutes les thématiques" view-more-href="#">
          <spw-header-navigation-item>
            <a href="#">Aménagement du territoire</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Urbanisme</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Patrimoine</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Lotissements</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Mobilité et transport</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Transports en commun</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Routes et autoroutes</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Vélo</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Environnement</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Nature et biodiversité</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Eau</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Déchets</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Économie</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Aides aux entreprises</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Commerce</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
          <spw-header-navigation-item>
            <a href="#">Énergie</a>
            <spw-header-navigation-dropdown>
              <spw-header-navigation-item>
                <a href="#">Primes énergie</a>
              </spw-header-navigation-item>
              <spw-header-navigation-item>
                <a href="#">Audit énergétique</a>
              </spw-header-navigation-item>
            </spw-header-navigation-dropdown>
          </spw-header-navigation-item>
        </spw-header-navigation-dropdown>
      </spw-header-navigation-item>

      <spw-header-navigation-item>
        <a href="#">Démarches</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Actualités</a>
      </spw-header-navigation-item>
      <spw-header-navigation-item>
        <a href="#">Contact</a>
      </spw-header-navigation-item>
    </spw-header-navigation>
  `;
}
const TemplateMegamenu = 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);
        }
    });
    element.innerHTML = htmlContentMegamenu(args);
    return element;
};
export const Megamenu = TemplateMegamenu.bind({});
Megamenu.args = {
    isActive: false,
    siteTitle: 'Titre du site',
    borderColor: 'var(--spw-ds-primary)',
};
Megamenu.storyName = 'Variante Megamenu';
Megamenu.parameters = {
    docs: {
        description: {
            story: `
Header avec navigation megamenu sur le premier item. Le megamenu affiche toutes les sous-catégories en colonnes avec leurs sous-menus respectifs.

Utilisation : ajoutez variant="megamenu" sur le spw-header-navigation-item souhaité. La propriété view-more-text et view-more-href sur le spw-header-navigation-dropdown permettent d'ajouter un bouton "Voir plus" en bas de chaque élément de niveau 2 du megamenu.
      `,
        },
    },
};
