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

Le composant Sidebar est un panneau latéral rétractable pour la navigation principale ou les actions contextuelles. Idéal pour les back-offices et applications web complexes nécessitant une navigation permanente et accessible.

## Structure

Le composant se compose de quatre éléments :
- **spw-sidebar** : Conteneur principal avec gestion de l'état déplié/rétracté
- **spw-sidebar-navigation-item** : Item de navigation avec icône, tooltip, badge et état actif
- **spw-sidebar-navigation-dropdown** : Menu déroulant multi-niveaux
- **spw-sidebar-navigation-separator** : Séparateur visuel entre groupes d'items

## Slots disponibles

- **navigation-top** : Éléments de navigation principaux (partie haute)
- **navigation-bottom** : Éléments de navigation secondaires (partie basse, fixée au bas)

## Fonctionnalités

- Rétracter/déplier via bouton toggle ou bordure cliquable
- Navigation multi-niveaux avec dropdowns imbriqués
- Tooltips automatiques en mode rétracté
- Badges de notification sur items
- État actif synchronisé avec la page courante
- Gestion automatique de la classe body pour adaptation du layout
- Compatible avec spw-topbar (détection automatique)

## Cas d'usage

- Navigation principale de back-office
- Menus de configuration et administration
- Interfaces d'applications métier
- Portails avec navigation complexe

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)
        `,
            },
        },
    },
};
export default meta;
function htmlContentDefault() {
    return /* HTML */ `
    <div slot="navigation-top">
      <spw-sidebar-navigation-item icon="fa-home" tooltip-title="Accueil" active> Accueil </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>
      <spw-sidebar-navigation-item icon="fa-file" bubble="3" tooltip-title="Documents">
        Documents
        <spw-sidebar-navigation-dropdown slot="dropdown">
          <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
          <spw-sidebar-navigation-item>
            Sous-catégorie
            <spw-sidebar-navigation-dropdown slot="dropdown">
              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item
          >
          <spw-sidebar-navigation-item>
            Sous-catégorie
            <spw-sidebar-navigation-dropdown slot="dropdown">
              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item
          >
          <spw-sidebar-navigation-item>
            Sous-catégorie
            <spw-sidebar-navigation-dropdown slot="dropdown">
              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>
            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item
          >
        </spw-sidebar-navigation-dropdown>
      </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-calendar" tooltip-title="Calendrier"> Calendrier </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-envelope" tooltip-title="Messages" bubble="9"> Messages </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-chart-sine" tooltip-title="Statistiques"> Statistiques </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-cloud" tooltip-title="Fichiers"> Fichiers </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-user-shield" tooltip-title="Permissions" disabled> Permissions </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>
      <spw-sidebar-navigation-item icon="fa-address-book" tooltip-title="Annuaire" bubbles="1"> Annuaire </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-moon" tooltip-title="Mode sombre"> Mode sombre </spw-sidebar-navigation-item>
    </div>
    <div slot="navigation-bottom">
      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>
      <spw-sidebar-navigation-item icon="fa-globe" tooltip-title="Liens utiles"> Liens utiles </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-circle-question" tooltip-title="Aide"> Aide </spw-sidebar-navigation-item>
    </div>
  `;
}
const TemplateDefault = 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 = htmlContentDefault();
    return element;
};
export const Default = TemplateDefault.bind({});
Default.args = {
    defaultExpanded: false,
};
function htmlContentBackOffice() {
    return /* HTML */ `
    <div slot="navigation-top">
      <spw-sidebar-navigation-item icon="fa-home" tooltip-title="Accueil" active> Accueil </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>
      <spw-sidebar-navigation-item icon="fa-file" tooltip-title="Documents"> Documents </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-calendar" tooltip-title="Calendrier"> Calendrier </spw-sidebar-navigation-item>
      <spw-sidebar-navigation-item icon="fa-envelope" tooltip-title="Messages" bubble="3"> Messages </spw-sidebar-navigation-item>
    </div>
    <div slot="navigation-bottom">
      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>
      <spw-sidebar-navigation-item icon="fa-circle-question" tooltip-title="Aide"> Aide </spw-sidebar-navigation-item>
    </div>
  `;
}
const TemplateBackOffice = args => {
    const wrapper = document.createElement('div');
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    let sidebarAttrs = '';
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            sidebarAttrs += ` ${toKebabCase(key)}="${val}"`;
        }
    });
    wrapper.innerHTML = /* HTML */ `
    <spw-topbar>
      <div slot="logo">Template back-office</div>
      <div slot="baseline">Exemple de baseline explicative</div>
      <div slot="right">
        <spw-button id="sidebar-toggle-btn" icon="fa-bars" is-icon-only="true" size="small" variant="secondary"></spw-button>
      </div>
    </spw-topbar>
    <spw-sidebar${sidebarAttrs}> ${htmlContentBackOffice()} </spw-sidebar>
    <main class="spw-ds-bo spw-ds-color-bg-grey-100">
      <div class="p-4">
        <h1 class="spw-ds-typography-heading-01 mb-3">Contenu principal</h1>
        <p class="spw-ds-typography-body-1 mb-4">Cliquez sur l'icône hamburger dans la topbar pour ouvrir/fermer la sidebar.</p>
        <spw-button variant="primary">Action principale</spw-button>
      </div>
    </main>
  `;
    const toggleBtn = wrapper.querySelector('#sidebar-toggle-btn');
    const sidebar = wrapper.querySelector('spw-sidebar');
    if (toggleBtn && sidebar) {
        toggleBtn.addEventListener('click', () => {
            sidebar.toggle();
        });
    }
    return wrapper;
};
export const BackOffice = TemplateBackOffice.bind({});
BackOffice.args = {
    defaultExpanded: false,
};
BackOffice.parameters = {
    docs: {
        description: {
            story: `Template simple de back-office avec topbar, sidebar et contenu principal. Le bouton hamburger dans la topbar permet d'ouvrir/fermer la sidebar via la méthode toggle().

#### Script pour le toggle

\`\`\`javascript
const toggleBtn = document.getElementById('sidebar-toggle-btn');
const sidebar = document.querySelector('spw-sidebar');

if (toggleBtn && sidebar) {
  toggleBtn.addEventListener('click', () => {
    sidebar.toggle();
  });
}
\`\`\`
`,
        },
    },
};
