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";
import "../../assets/css/components.css";
const elementTag = 'spw-modal';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Organismes/Modale',
    component: elementTag,
    argTypes: Object.assign(Object.assign({}, argTypes), { content: { control: 'text' }, buttons: { control: 'text' } }),
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Modal affiche une fenêtre superposée qui capte l'attention de l'utilisateur pour afficher du contenu ou des actions importantes. Il masque temporairement le reste de l'interface et nécessite une interaction avant de continuer.

## Tailles disponibles

- **Small** : Pour des messages courts ou confirmations simples
- **Medium** : Taille par défaut pour la plupart des cas d'usage
- **Large** : Pour du contenu plus riche ou des formulaires complets
- **Fluid** : S'adapte dynamiquement au contenu

## Fonctionnalités

- Ouverture via attribut data-modal-trigger sur n'importe quel élément
- Fermeture via attribut data-modal-close, touche Escape, ou clic overlay
- Piège de focus (focus trap) pour l'accessibilité
- Animations d'entrée/sortie en fondu
- Gestion automatique des vidéos (arrêt à la fermeture)
- Méthodes programmatiques openModal() et closeModal()
- Événements spwModalOpen et spwModalClose

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)
        `,
            },
        },
    },
};
export default meta;
const Template = args => {
    const fragment = new DocumentFragment();
    const button = document.createElement('spw-button');
    button.textContent = 'Ouvrir fenêtre modale';
    const element = document.createElement(elementTag);
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else {
            if (key !== 'content' && key !== 'buttons' && key !== 'closeModal' && key !== 'openModal') {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    button.setAttribute('data-modal-trigger', args.id);
    if (args.content) {
        const contentDiv = document.createElement('div');
        contentDiv.setAttribute('slot', 'content');
        contentDiv.innerHTML = args.content;
        element.appendChild(contentDiv);
    }
    if (args.buttons) {
        const buttonsDiv = document.createElement('div');
        buttonsDiv.setAttribute('slot', 'buttons');
        buttonsDiv.innerHTML = args.buttons;
        element.appendChild(buttonsDiv);
    }
    fragment.appendChild(button);
    fragment.appendChild(element);
    return fragment;
};
export const Small = Template.bind({});
Small.args = {
    size: 'small',
    id: 'modal1',
    content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',
    buttons: `
  <spw-group alignment="right">
    <spw-button size="medium" variant="primary" data-modal-close="modal1">Valider</spw-button>
    <spw-button size="medium" variant="secondary" data-modal-close="modal1">Fermer</spw-button>
  </spw-group>
  `,
};
Small.parameters = {
    docs: {
        description: {
            story: `
Modal de petite taille idéale pour des messages de confirmation courts ou des alertes simples. Elle capte l'attention sans occuper trop d'espace à l'écran.

Cas d'usage : confirmations d'actions ("Êtes-vous sûr de vouloir supprimer ?"), messages d'alerte courts, notifications importantes nécessitant une action utilisateur.
      `,
        },
        source: {
            code: `
<spw-button data-modal-trigger="modal1">Ouvrir fenêtre modale</spw-button>

<spw-modal size="small" id="modal1">
  <div slot="content">
    Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.
  </div>
  <div slot="buttons">
    <spw-group alignment="right">
      <spw-button size="medium" variant="primary" data-modal-close="modal1">Valider</spw-button>
      <spw-button size="medium" variant="secondary" data-modal-close="modal1">Fermer</spw-button>
    </spw-group>
  </div>
</spw-modal>
      `,
        },
    },
};
export const Medium = Template.bind({});
Medium.args = {
    size: 'medium',
    id: 'modal2',
    content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',
    buttons: `
  <spw-group alignment="right">
    <spw-button size="medium" variant="primary" data-modal-close="modal2">Valider</spw-button>
    <spw-button size="medium" variant="secondary" data-modal-close="modal2">Fermer</spw-button>
  </spw-group>
  `,
};
Medium.parameters = {
    docs: {
        description: {
            story: `
Modal de taille moyenne, la plus couramment utilisée. Elle offre un bon équilibre entre espace disponible et focus de l'utilisateur.

Cas d'usage : formulaires de taille moyenne, affichage d'informations détaillées, paramètres de configuration, dialogues nécessitant plusieurs champs de saisie.
      `,
        },
        source: {
            code: `
<spw-button data-modal-trigger="modal2">Ouvrir fenêtre modale</spw-button>

<spw-modal size="medium" id="modal2">
  <div slot="content">
    Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.
  </div>
  <div slot="buttons">
    <spw-group alignment="right">
      <spw-button size="medium" variant="primary" data-modal-close="modal2">Valider</spw-button>
      <spw-button size="medium" variant="secondary" data-modal-close="modal2">Fermer</spw-button>
    </spw-group>
  </div>
</spw-modal>
      `,
        },
    },
};
export const Large = Template.bind({});
Large.args = {
    size: 'large',
    id: 'modal3',
    content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',
    buttons: `
  <spw-group alignment="right">
    <spw-button size="medium" variant="primary" data-modal-close="modal3">Valider</spw-button>
    <spw-button size="medium" variant="secondary" data-modal-close="modal3">Fermer</spw-button>
  </spw-group>
  `,
};
Large.parameters = {
    docs: {
        description: {
            story: `
Grande modal pour afficher du contenu riche ou des formulaires complexes. Elle maximise l'espace disponible tout en conservant les marges nécessaires.

Cas d'usage : formulaires longs avec plusieurs sections, affichage de tableaux ou listes détaillées, éditeurs de contenu, prévisualisation de documents.
      `,
        },
        source: {
            code: `
<spw-button data-modal-trigger="modal3">Ouvrir fenêtre modale</spw-button>

<spw-modal size="large" id="modal3">
  <div slot="content">
    Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.
  </div>
  <div slot="buttons">
    <spw-group alignment="right">
      <spw-button size="medium" variant="primary" data-modal-close="modal3">Valider</spw-button>
      <spw-button size="medium" variant="secondary" data-modal-close="modal3">Fermer</spw-button>
    </spw-group>
  </div>
</spw-modal>
      `,
        },
    },
};
export const Fluid = Template.bind({});
Fluid.args = {
    size: 'fluid',
    id: 'modal4',
    content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',
    buttons: `
  <spw-group alignment="right">
    <spw-button size="medium" variant="primary" data-modal-close="modal4">Valider</spw-button>
    <spw-button size="medium" variant="secondary" data-modal-close="modal4">Fermer</spw-button>
  </spw-group>
    `,
};
Fluid.parameters = {
    docs: {
        description: {
            story: `
Modal fluide qui s'adapte dynamiquement à la taille de son contenu. Elle ajuste automatiquement sa largeur en fonction de ce qu'elle contient, dans les limites raisonnables.

Cas d'usage : contenu dynamique de taille variable, images ou médias dont la taille n'est pas connue à l'avance, galeries adaptatives.
      `,
        },
        source: {
            code: `
<spw-button data-modal-trigger="modal4">Ouvrir fenêtre modale</spw-button>

<spw-modal size="fluid" id="modal4">
  <div slot="content">
    Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.
  </div>
  <div slot="buttons">
    <spw-group alignment="right">
      <spw-button size="medium" variant="primary" data-modal-close="modal4">Valider</spw-button>
      <spw-button size="medium" variant="secondary" data-modal-close="modal4">Fermer</spw-button>
    </spw-group>
  </div>
</spw-modal>
      `,
        },
    },
};
