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 } from "../../../utils/utils";
const elementTag = 'spw-accordion';
const subComponentTags = ['spw-accordion-content', 'spw-accordion-item', 'spw-accordion-title'];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, {
    tag: elementTag,
    // customTokens: [
    //   {
    //     name: '--spw-accordion-padding',
    //     description: 'Padding interne des items de l’accordéon',
    //     defaultValue: '16px',
    //   },
    //   {
    //     name: '--spw-accordion-border-color',
    //     description: 'Couleur de la bordure entre les items',
    //     defaultValue: '#ccc',
    //   },
    // ],
})), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: 'Organismes/Accordéon',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page. Ils sont particulièrement utiles pour organiser de grandes quantités d'informations de manière compacte et améliorer la lisibilité du contenu.

## Structure

Le composant se compose de trois parties :
- **spw-accordion** : Le conteneur principal qui englobe tous les items
- **spw-accordion-item** : Chaque élément pliable individuel
- **spw-accordion-title** : Le titre cliquable de chaque item
- **spw-accordion-content** : Le contenu qui s'affiche/se masque

## Fonctionnalités

- Ouverture/fermeture animée des sections
- Possibilité d'avoir plusieurs items ouverts simultanément
- Support des icônes personnalisées pour chaque titre
- Accessibilité avec gestion du clavier et attributs ARIA
- Personnalisation du niveau de titre pour le SEO

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/054567-accordeon)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slotArgs) {
    return /* HTML */ `
    <spw-accordion-item default-open="${slotArgs.defaultOpen}">
      <spw-accordion-title tag="${slotArgs.tag}" icon="${slotArgs.icon}" slot="title">Titre avec icône</spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut
        malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Pellentesque suscipit magna tellus,
        eu ullamcorper risus efficitur at. Donec eu tincidunt dolor. Suspendisse imperdiet, velit non tristique dignissim, sem est viverra arcu, eget malesuada felis massa eget
        sem. Nam sed felis eu sem suscipit sollicitudin volutpat vitae turpis. Sed quis facilisis magna, sed condimentum enim. Sed gravida est eget est dapibus rutrum. Suspendisse
        lacus leo, imperdiet et leo at, ultrices porta libero.
      </spw-accordion-content>
    </spw-accordion-item>
    <spw-accordion-item>
      <spw-accordion-title tag="${slotArgs.tag}" slot="title">Titre sans icône</spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut
        malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Pellentesque suscipit magna tellus,
        eu ullamcorper risus efficitur at. Donec eu tincidunt dolor. Suspendisse imperdiet, velit non tristique dignissim, sem est viverra arcu, eget malesuada felis massa eget
        sem. Nam sed felis eu sem suscipit sollicitudin volutpat vitae turpis. Sed quis facilisis magna, sed condimentum enim. Sed gravida est eget est dapibus rutrum. Suspendisse
        lacus leo, imperdiet et leo at, ultrices porta libero.
      </spw-accordion-content>
    </spw-accordion-item>
  `;
}
const Template = args => {
    const element = document.createElement(elementTag);
    // Apply properties to the main element
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    // Set inner HTML content
    element.innerHTML = htmlContent(args);
    return element;
};
export const Default = Template.bind({});
Default.args = {
    icon: 'fa-book',
    tag: 'h3',
    defaultOpen: true,
};
Default.parameters = {
    docs: {
        description: {
            story: `Accordéon par défaut avec items empilés. Les items sont séparés par une bordure et partagent un fond commun.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * VARIANT SEPARATED
 * ------------------------------------------------------------------------------------------------- */
function htmlContentSeparated(slotArgs) {
    return /* HTML */ `
    <spw-accordion-item default-open="${slotArgs.defaultOpen}">
      <spw-accordion-title tag="${slotArgs.tag}" icon="${slotArgs.icon}" slot="title">Titre avec icône</spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam.
      </spw-accordion-content>
    </spw-accordion-item>
    <spw-accordion-item>
      <spw-accordion-title tag="${slotArgs.tag}" slot="title">Titre sans icône</spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam.
      </spw-accordion-content>
    </spw-accordion-item>
  `;
}
const TemplateSeparated = args => {
    const element = document.createElement(elementTag);
    element.setAttribute('variant', 'separated');
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentSeparated(args);
    return element;
};
export const Separated = TemplateSeparated.bind({});
Separated.args = {
    icon: 'fa-book',
    tag: 'h3',
    defaultOpen: true,
};
Separated.parameters = {
    docs: {
        description: {
            story: `Variant "separated" : les items sont visuellement séparés avec un espacement entre eux, idéal pour une meilleure distinction visuelle des sections.`,
        },
    },
};
/* -------------------------------------------------------------------------------------------------
 * VARIANT SEPARATED AVEC SLOT RIGHT
 * ------------------------------------------------------------------------------------------------- */
function htmlContentSeparatedWithSlotRight(slotArgs) {
    return /* HTML */ `
    <spw-accordion-item default-open="${slotArgs.defaultOpen}">
      <spw-accordion-title tag="${slotArgs.tag}" icon="${slotArgs.icon}" slot="title">
        Titre avec tag
        <spw-tag slot="right" size="small" variant="green">Nouveau</spw-tag>
      </spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam.
      </spw-accordion-content>
    </spw-accordion-item>
    <spw-accordion-item>
      <spw-accordion-title tag="${slotArgs.tag}" slot="title">
        Titre avec tag warning
        <spw-tag slot="right" size="small" variant="orange">En cours</spw-tag>
      </spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam.
      </spw-accordion-content>
    </spw-accordion-item>
    <spw-accordion-item>
      <spw-accordion-title tag="${slotArgs.tag}" slot="title"> Titre sans tag </spw-accordion-title>
      <spw-accordion-content slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam.
      </spw-accordion-content>
    </spw-accordion-item>
  `;
}
const TemplateSeparatedWithSlotRight = args => {
    const element = document.createElement(elementTag);
    element.setAttribute('variant', 'separated');
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentSeparatedWithSlotRight(args);
    return element;
};
export const SeparatedAvecSlotRight = TemplateSeparatedWithSlotRight.bind({});
SeparatedAvecSlotRight.args = {
    icon: 'fa-folder',
    tag: 'h3',
    defaultOpen: true,
};
SeparatedAvecSlotRight.parameters = {
    docs: {
        description: {
            story: `Variant "separated" avec utilisation du slot "right" sur spw-accordion-title pour ajouter du contenu personnalisé (tags, badges, etc.) à droite du titre.`,
        },
    },
};
