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-group';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Organismes/Groupe de boutons',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Groupe permet d'organiser plusieurs éléments interactifs (boutons, checkboxes, radios) en une unité visuelle cohérente. Il facilite la gestion d'actions connexes et améliore l'expérience utilisateur.

## Types de groupes

Le composant supporte trois types d'éléments :
- **Buttons** : Groupe de boutons d'action
- **Checkboxes** : Groupe de cases à cocher
- **Radios** : Groupe de boutons radio

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/56fd38-groupe-de-boutons)
        `,
            },
        },
    },
};
export default meta;
// Default HTML content
function defaultHtmlContent() {
    return /* HTML */ `
    <spw-button>Bouton primaire</spw-button>
    <spw-button variant="secondary">Bouton secondaire</spw-button>
    <spw-button variant="tertiary">Bouton tertiaire</spw-button>
  `;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const slottedLabel = 'content';
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else {
            if (key !== slottedLabel) {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    // Use provided HTML content or fallback to default
    const content = args[slottedLabel] || defaultHtmlContent();
    element.innerHTML = content;
    return element;
};
// Stories
export const Default = Template.bind({});
Default.args = {
    content: defaultHtmlContent(),
};
Default.parameters = {
    docs: {
        description: {
            story: `
Groupe de boutons horizontal par défaut. Les boutons sont alignés horizontalement avec un espacement régulier.

Parfait pour des actions primaires et secondaires côte à côte (ex: "Enregistrer" / "Annuler").
      `,
        },
    },
};
export const Vertical = Template.bind({});
Vertical.args = {
    orientation: 'vertical',
    content: `
    <spw-button>Bouton vertical 1</spw-button>
    <spw-button variant="secondary">Bouton vertical 2</spw-button>
    <spw-button variant="tertiary">Bouton vertical 3</spw-button>
  `,
};
Vertical.parameters = {
    docs: {
        description: {
            story: `
Groupe de boutons empilés verticalement. Utile pour des listes d'actions dans une sidebar ou un menu.

L'orientation verticale est recommandée pour plus de 3 boutons ou sur mobile.
      `,
        },
    },
};
export const MultiLine = Template.bind({});
MultiLine.args = {
    flexWrap: 'wrap',
    alignment: 'center',
    content: `
    <spw-button variant="primary">Démarches</spw-button>
    <spw-button variant="primary">Réforme primes énergie</spw-button>
    <spw-button variant="primary">Jobs</spw-button>
    <spw-button variant="primary">Trafiroutes</spw-button>
    <spw-button variant="primary">Précompte immobilier</spw-button>
    <spw-button variant="primary">Taxes de circulation</spw-button>
    <spw-button variant="primary">Plan de paiement</spw-button>
    <spw-button variant="primary">Aides sociales</spw-button>
    <spw-button variant="primary">Permis de conduire</spw-button>
    <spw-button variant="primary">Urbanisme</spw-button>
  `,
};
MultiLine.parameters = {
    docs: {
        description: {
            story: `
Groupe de boutons avec retour à la ligne automatique (flex-wrap: wrap). Les boutons s'adaptent à la largeur disponible et passent à la ligne suivante si nécessaire.

Idéal pour des raccourcis thématiques ou des liens rapides en nombre variable.
      `,
        },
    },
};
export const Links = Template.bind({});
Links.args = {
    orientation: 'vertical',
    content: `
    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
  `,
};
Links.parameters = {
    docs: {
        description: {
            story: `
Groupe de liens tertiaires avec icônes, organisés verticalement. Idéal pour une navigation secondaire ou un menu de liens rapides.

Les icônes positionnées à gauche améliorent la scannabilité visuelle de la liste.
      `,
        },
    },
};
export const CheckboxesAvecErreur = Template.bind({});
CheckboxesAvecErreur.storyName = 'CheckboxesError';
CheckboxesAvecErreur.args = {
    type: 'checkboxes',
    orientation: 'vertical',
    label: 'Choisissez vos options',
    assistiveText: "Texte d'assistance sous le label.",
    error: 'Veuillez sélectionner au moins une option.',
    content: `
    <spw-checkbox name="option1" value="option1">Option 1</spw-checkbox>
    <spw-checkbox name="option2" value="option2">Option 2</spw-checkbox>
    <spw-checkbox name="option3" value="option3">Option 3</spw-checkbox>
  `,
};
CheckboxesAvecErreur.parameters = {
    docs: {
        description: {
            story: `
Groupe de checkboxes avec un message d'erreur affiché sous le groupe via la prop error. La prop assistive-text permet d'afficher un texte d'aide sous le label.
      `,
        },
    },
};
export const RadiosAvecErreur = Template.bind({});
RadiosAvecErreur.storyName = 'RadiosError';
RadiosAvecErreur.args = {
    type: 'radios',
    orientation: 'vertical',
    label: 'Choisissez une option',
    error: 'Ce champ est obligatoire.',
    content: `
    <spw-radio name="radio-error" value="a">Option A</spw-radio>
    <spw-radio name="radio-error" value="b">Option B</spw-radio>
    <spw-radio name="radio-error" value="c">Option C</spw-radio>
  `,
};
RadiosAvecErreur.parameters = {
    docs: {
        description: {
            story: `
Groupe de radios avec un message d'erreur affiché sous le groupe via la prop error.
      `,
        },
    },
};
export const CheckboxesAvecHint = Template.bind({});
CheckboxesAvecHint.storyName = 'CheckboxesHint';
CheckboxesAvecHint.args = {
    type: 'checkboxes',
    orientation: 'vertical',
    label: 'Choisissez vos options',
    hint: 'Vous pouvez sélectionner plusieurs options.',
    content: `
    <spw-checkbox name="hint1" value="hint1">Option 1</spw-checkbox>
    <spw-checkbox name="hint2" value="hint2">Option 2</spw-checkbox>
    <spw-checkbox name="hint3" value="hint3">Option 3</spw-checkbox>
  `,
};
CheckboxesAvecHint.parameters = {
    docs: {
        description: {
            story: `
Groupe de checkboxes avec un message d'indication affiché sous le groupe via la prop hint.
      `,
        },
    },
};
export const RadiosAvecSuccess = Template.bind({});
RadiosAvecSuccess.storyName = 'RadiosSuccess';
RadiosAvecSuccess.args = {
    type: 'radios',
    orientation: 'vertical',
    label: 'Choisissez une option',
    success: 'Votre choix a bien été pris en compte.',
    content: `
    <spw-radio name="radio-success" value="a" checked>Option A</spw-radio>
    <spw-radio name="radio-success" value="b">Option B</spw-radio>
    <spw-radio name="radio-success" value="c">Option C</spw-radio>
  `,
};
RadiosAvecSuccess.parameters = {
    docs: {
        description: {
            story: `
Groupe de radios avec un message de succès affiché sous le groupe via la prop success.
      `,
        },
    },
};
export const CheckboxesAvecWarning = Template.bind({});
CheckboxesAvecWarning.storyName = 'CheckboxesWarning';
CheckboxesAvecWarning.args = {
    type: 'checkboxes',
    orientation: 'horizontal',
    label: 'Choisissez vos options',
    warning: 'Attention, cette sélection est irréversible.',
    content: `
    <spw-checkbox name="warning1" value="warning1">Option 1</spw-checkbox>
    <spw-checkbox name="warning2" value="warning2">Option 2</spw-checkbox>
  `,
};
CheckboxesAvecWarning.parameters = {
    docs: {
        description: {
            story: `
Groupe de checkboxes horizontaux avec un message d'avertissement affiché sous le groupe via la prop warning.
      `,
        },
    },
};
