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-topbar';
const subComponentTags = [];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: 'Organismes/Topbar',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Topbar définit une barre supérieure horizontale pour les interfaces de back-office. Il affiche le logo, le titre de l'application et une baseline explicative, avec possibilité d'ajouter des éléments à droite.

## Structure

Le composant est un élément simple sans sous-composants :
- **spw-topbar** : Conteneur principal avec logo Wallonie intégré et zones de contenu

## Slots disponibles

| Slot | Description |
|------|-------------|
| logo | Nom ou titre de l'application, placé à côté du logo dans le lien d'accueil |
| baseline | Texte explicatif ou description de l'application |
| right | Zone pour éléments à droite (boutons, profil utilisateur, notifications, etc.) |
| *(default)* | Contenu additionnel dans la zone logo, après le lien d'accueil |

## Fonctionnalités

- Logo Wallonie SVG intégré par défaut (désactivable via has-wallonie-logo="false")
- Lien vers la homepage (href="/")
- Gestion automatique de la classe body "has-topbar" pour layout
- Layout flex avec distribution automatique des zones
- Compatible avec spw-sidebar (détection mutuelle)
- Zone droite flexible pour actions utilisateur

## Cas d'usage

- En-tête de back-office avec identification application
- Barre de navigation supérieure d'outil métier
- Header d'interface d'administration
- Bandeau supérieur d'application interne
`,
            },
        },
    },
};
export default meta;
function htmlContentDefault() {
    return /* HTML */ `
    <div slot="logo">Template back-office</div>
    <div slot="baseline">Ceci est un exemple de baseline explicative</div>
    <div slot="right"></div>
  `;
}
function htmlContentCustomLogo() {
    return /* HTML */ `
    <img slot="logo" src="https://placehold.co/200x80/EEE/31343C?text=Logo" alt="Logo personnalisé" style="height: 32px; width: auto;" />
    <div slot="baseline">Portail métier avec logo personnalisé</div>
    <div slot="right"></div>
  `;
}
function htmlContentMinimal() {
    return /* HTML */ ` <div slot="logo">Application interne</div> `;
}
function createTemplate(htmlFn) {
    return 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 = htmlFn(args);
        return element;
    };
}
const TemplateDefault = createTemplate(htmlContentDefault);
const TemplateCustomLogo = createTemplate(htmlContentCustomLogo);
const TemplateMinimal = createTemplate(htmlContentMinimal);
export const Default = TemplateDefault.bind({});
Default.args = {};
Default.parameters = {
    docs: {
        description: {
            story: `
Topbar par défaut avec logo Wallonie SVG, titre de l'application (slot logo) et baseline explicative (slot baseline). Zone droite vide mais disponible.

Slots utilisés :
- logo : titre de l'application
- baseline : description ou contexte de l'outil
- right : vide (peut accueillir boutons, profil utilisateur, notifications)

La topbar ajoute automatiquement la classe "has-topbar" au body, permettant aux autres composants (comme spw-sidebar) de s'adapter au layout.
      `,
        },
    },
};
export const CustomLogo = TemplateCustomLogo.bind({});
CustomLogo.storyName = 'Logo personnalisé';
CustomLogo.args = {
    hasWallonieLogo: false,
};
CustomLogo.parameters = {
    docs: {
        description: {
            story: `
Topbar avec un logo custom via le slot logo et le logo Wallonie désactivé (has-wallonie-logo="false"). Permet d'intégrer n'importe quelle image ou contenu HTML dans la zone logo.

Slots utilisés :
- logo : image personnalisée
- baseline : description du portail

Cas d'usage : portails métier ou applications spécialisées nécessitant une identité visuelle distincte du logo Wallonie standard.
      `,
        },
    },
};
export const Minimal = TemplateMinimal.bind({});
Minimal.storyName = 'Minimal';
Minimal.args = {};
Minimal.parameters = {
    docs: {
        description: {
            story: `
Topbar minimaliste avec uniquement le slot logo renseigné. Aucune baseline, aucune action à droite. Utile pour des interfaces très épurées ou lors du prototypage.

Seul slot utilisé :
- logo : nom de l'application
      `,
        },
    },
};
