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-card';
const subComponentTags = ['spw-card-image', 'spw-card-content', 'spw-card-title', 'spw-card-excerpt', 'spw-card-subtags', 'spw-card-subtag-item'];
const argTypes = Object.assign(Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags)), { contentDate: {
        control: 'text',
        description: 'Date à afficher dans le contenu de la carte (au format YYYY-MM-DD).',
    } });
const meta = {
    title: 'Organismes/Carte (card)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            source: {
                transform: (src) => {
                    // Retire le wrapper div ajouté pour limiter la largeur du preview
                    return src.replace(/^<div[^>]*>\n?\s*/i, '').replace(/\n?\s*<\/div>$/i, '');
                },
            },
            description: {
                component: `

Le composant Carte est un conteneur cliquable qui affiche un aperçu visuel de contenu (article, événement, personne, vidéo). Il permet de présenter des informations de manière attrayante et structurée, souvent utilisé dans des listes ou grilles de contenus similaires.

## Variants disponibles

- **Default / Horizontal** : Carte classique avec image à gauche, contenu à droite
- **Vertical** : Image en haut, contenu en dessous
- **Event** : Carte événement avec date et tags
- **Video** : Carte vidéo avec icône de lecture
- **Light** : Version allégée sans image, texte seul
- **Mini** : Version compacte pour sidebars
- **People** : Carte profil avec avatar rond
- **Sidebar** : Version pour barre latérale
- **Highlighted** : Carte mise en avant avec style visuel distinctif
- **RoundedPicture** : Carte pour une galerie photo avec image arrondie et icône de survol personnalisable

## Structure

Le composant se compose de plusieurs parties :
- **spw-card** : Conteneur principal avec la propriété href
- **spw-card-image** : Bloc image avec label optionnel
- **spw-card-content** : Conteneur du contenu textuel
- **spw-card-title** : Titre de la carte
- **spw-card-excerpt** : Description/extrait
- **spw-card-subtags** : Liste de sous-tags (liens ou tags)
- **spw-card-subtag-item** : Item de sous-tag individuel

## Fonctionnalités

- Cartes entièrement cliquables
- Support des images avec labels
- Tags et catégories personnalisables
- Versions compactes pour sidebars
- Cartes profil avec affiliations
- Responsive design adaptatif
- Hover states et transitions fluides

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/71f31e-carte-card)
        `,
            },
        },
    },
};
export default meta;
function getHtmlContent(variant, slotArgs) {
    const cardImage = slotArgs.imgSrc ? `<spw-card-image label="${slotArgs.label}"><img alt="${slotArgs.imgAlt || ''}" src="${slotArgs.imgSrc}" /></spw-card-image>` : '';
    const cardExcerpt = slotArgs.excerpt ? `<spw-card-excerpt>${slotArgs.excerpt}</spw-card-excerpt>` : '';
    const cardTitle = `<spw-card-title>${slotArgs.title}</spw-card-title>`;
    const cardSubtagsLinks = `
    <spw-card-subtags variant="link">
      <spw-card-subtag-item link="http://google.be">Sous-tag 1</spw-card-subtag-item>
      <spw-card-subtag-item link="http://google.be">Sous-tag 2</spw-card-subtag-item>
    </spw-card-subtags>
  `;
    const cardSubtagsTags = `
    <spw-card-subtags variant="tag">
      <spw-card-subtag-item link="http://google.be">Sous-tag 1</spw-card-subtag-item>
      <spw-card-subtag-item link="http://google.be">Sous-tag 2</spw-card-subtag-item>
    </spw-card-subtags>
  `;
    switch (variant) {
        case 'light':
            return `<spw-card-content>${slotArgs.title}</spw-card-content>`;
        case 'event':
            return `
        <spw-card-content tag="${slotArgs.contentTag}">
          ${cardTitle}
          ${cardSubtagsTags}
        </spw-card-content>
      `;
        case 'sidebar':
            return `
        ${cardImage}
        <spw-card-content>
          ${cardTitle}
        </spw-card-content>
      `;
        case 'vertical':
            return `
        ${cardImage}
        <spw-card-content tag="${slotArgs.contentTag}" date="${slotArgs.contentDate}">
          ${cardTitle}
          ${cardExcerpt}
          ${cardSubtagsTags}
        </spw-card-content>
      `;
        case 'video':
            return `
        ${cardImage}
        <spw-card-content tag="${slotArgs.contentTag}">
          ${cardTitle}
        </spw-card-content>
      `;
        case 'people':
            if (slotArgs.withAffiliates) {
                return `
          <spw-card-title>${slotArgs.title}</spw-card-title>
          <spw-card-content>
            <spw-card-excerpt line-clamp="none">
              <h4 class="spw-ds-typography-heading-04 mb-1">${slotArgs.personName}</h4>
              <p class="mb-3">${slotArgs.personTitle}</p>
              <p class="mb-1">${slotArgs.address}</p>
              <p class="mb-1">${slotArgs.city}</p>
              <spw-link href="tel:${slotArgs.phone}">Tel : ${slotArgs.phone}</spw-link>
            </spw-card-excerpt>
            <spw-card-image>
              <img alt="${slotArgs.imgAlt || ''}" src="${slotArgs.imgSrc}" />
            </spw-card-image>
          </spw-card-content>
          <spw-separator class="mb-2"></spw-separator>
          <spw-card-content>
            <h4 class="spw-ds-typography-heading-04 mb-3">Entités affiliées :</h4>
            <spw-card class="mb-4" variant="people" full-height="true">
              <spw-card-title border-color="#F6CC1E">SPW Support</spw-card-title>
              <spw-card-content>
                <spw-card-excerpt line-clamp="none">
                  <h4 class="spw-ds-typography-heading-04 mb-1">John Doe</h4>
                  <p class="mb-3">Directeur général</p>
                  <p class="mb-1">Place Joséphine Charlotte, 1</p>
                  <p class="mb-1">5100 Jambes</p>
                  <spw-link href="tel:${slotArgs.phone}">Tel : ${slotArgs.phone}</spw-link>
                </spw-card-excerpt>
                <spw-card-image>
                  <img alt="Image" src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
                </spw-card-image>
              </spw-card-content>
            </spw-card>
            <spw-card variant="people" full-height="true">
              <spw-card-title border-color="#8005CC">SPW Digital</spw-card-title>
              <spw-card-content>
                <spw-card-excerpt line-clamp="none">
                  <h4 class="spw-ds-typography-heading-04 mb-1">John Doe</h4>
                  <p class="mb-3">Directeur général</p>
                  <p class="mb-1">Place Joséphine Charlotte, 1</p>
                  <p class="mb-1">5100 Jambes</p>
                  <spw-link href="tel:${slotArgs.phone}">Tel : ${slotArgs.phone}</spw-link>
                </spw-card-excerpt>
                <spw-card-image>
                  <img alt="Image" src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
                </spw-card-image>
              </spw-card-content>
            </spw-card>
          </spw-card-content>
        `;
            }
            return `
        <spw-card-title>${slotArgs.title}</spw-card-title>
        <spw-card-content>
          <spw-card-excerpt line-clamp="none">
            <h4 class="spw-ds-typography-heading-04 mb-1">${slotArgs.personName}</h4>
            <p class="mb-3">${slotArgs.personTitle}</p>
            <p class="mb-1">${slotArgs.address}</p>
            <p class="mb-1">${slotArgs.city}</p>
            <spw-link href="tel:${slotArgs.phone}">Tel : ${slotArgs.phone}</spw-link>
          </spw-card-excerpt>
          <spw-card-image>
            <img alt="${slotArgs.imgAlt || ''}" src="${slotArgs.imgSrc}" />
          </spw-card-image>
        </spw-card-content>
      `;
        case 'rounded-picture':
            return `
        ${cardImage}
        <spw-card-content tag="${slotArgs.contentTag}" date="${slotArgs.contentDate}">
          ${cardTitle}
          ${cardExcerpt}
        </spw-card-content>
      `;
        default:
            return `
        ${cardImage}
        <spw-card-content tag="${slotArgs.contentTag}" date="${slotArgs.contentDate}">
          ${cardSubtagsLinks}
          ${cardTitle}
          ${cardExcerpt}
        </spw-card-content>
      `;
    }
}
const Template = args => {
    const wrapper = document.createElement('div');
    wrapper.style.maxWidth = '2000px';
    const element = document.createElement(elementTag);
    const variant = args.variant || 'news';
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
        if (masterProps.includes(key)) {
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = getHtmlContent(variant, args);
    wrapper.appendChild(element);
    return wrapper;
};
export const Default = Template.bind({});
Default.args = {
    fullHeight: true,
    href: 'http://google.com',
    label: 'Label',
    target: '_blank',
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    contentTag: 'Actualités',
    contentDate: '2024-02-09',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
    excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
};
export const WithoutImage = Template.bind({});
WithoutImage.args = Object.assign(Object.assign({}, Default.args), { imgSrc: '' });
export const Light = Template.bind({});
Light.args = {
    fullHeight: true,
    href: 'http://google.com',
    target: '_blank',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
    subTag: '',
    contentTag: '',
    contentDate: '',
};
export const Vertical = Template.bind({});
Vertical.args = {
    variant: 'vertical',
    fullHeight: true,
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    href: 'http://google.com',
    target: '_blank',
    label: '',
    contentTag: 'Publication',
    contentDate: '2024-02-09',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
    excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
};
export const Event = Template.bind({});
Event.args = {
    variant: 'event',
    fullHeight: true,
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    href: 'http://google.com',
    target: '_blank',
    label: '',
    dateStart: '11/02',
    dateEnd: '12/02',
    contentTag: 'Evènement',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
};
export const Video = Template.bind({});
Video.args = {
    variant: 'video',
    fullHeight: true,
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    href: 'http://google.com',
    target: '_blank',
    label: '',
    contentTag: 'Vidéo',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
};
export const Mini = Template.bind({});
Mini.args = {
    variant: 'sidebar',
    fullHeight: true,
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    href: 'http://google.com',
    target: '_blank',
    label: '',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
};
export const People = Template.bind({});
People.args = {
    variant: 'people',
    fullHeight: true,
    title: 'SPW Secrétariat Général',
    personName: 'John Doe',
    personTitle: 'Directeur général',
    address: 'Place Joséphine Charlotte, 1',
    city: '5100 Jambes',
    phone: '081000000',
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
};
export const PeopleWithAffiliates = Template.bind({});
PeopleWithAffiliates.args = {
    variant: 'people',
    withAffiliates: true,
    fullHeight: true,
    title: 'SPW Secrétariat Général',
    personName: 'John Doe',
    personTitle: 'Secrétaire général',
    address: 'Place Joséphine Charlotte, 1',
    city: '5100 Jambes',
    phone: '081000000',
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
};
export const Highlighted = Template.bind({});
Highlighted.args = {
    variant: 'highlighted',
    fullHeight: true,
    href: 'http://google.com',
    label: 'Label',
    target: '_blank',
    imgAlt: 'Image',
    imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    contentTag: 'Actualités',
    contentDate: '2024-02-09',
    title: 'Comment soutenir nos agricultrices et agriculteurs ?',
    excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
};
Default.parameters = {
    docs: {
        description: {
            story: `Carte horizontale par défaut avec image à gauche et contenu à droite. Affiche un tag, une date, un titre, un extrait et des sous-tags cliquables. Format idéal pour listes d'articles ou actualités.`,
        },
    },
};
WithoutImage.parameters = {
    docs: {
        description: {
            story: `Carte sans image, contenu textuel uniquement. Utile lorsqu'aucune image pertinente n'est disponible ou pour varier la présentation dans une liste.`,
        },
    },
};
Light.parameters = {
    docs: {
        description: {
            story: `Version allégée avec titre seul, sans image ni métadonnées. Parfaite pour des listes simples de liens ou menus de navigation secondaire.`,
        },
    },
};
Vertical.parameters = {
    docs: {
        description: {
            story: `Carte verticale avec image en haut et contenu en dessous. Format populaire pour grilles d'articles, articles connexes ou publications. Idéale pour présentation en colonnes.`,
        },
    },
};
Event.parameters = {
    docs: {
        description: {
            story: `Carte événement avec dates de début/fin visibles. Optimisée pour afficher des événements avec période définie.`,
        },
    },
};
Video.parameters = {
    docs: {
        description: {
            story: `Carte vidéo avec icône de lecture superposée sur l'image. Signale clairement un contenu vidéo et invite au clic pour visionner.`,
        },
    },
};
Mini.parameters = {
    docs: {
        description: {
            story: `Version compacte pour sidebar ou colonne latérale. Image réduite à gauche avec titre à droite, format économe en espace.`,
        },
    },
};
People.parameters = {
    docs: {
        description: {
            story: `Carte profil avec avatar rond, nom, fonction, et coordonnées. Idéale pour annuaires, équipes, organigrammes ou pages de contact.`,
        },
    },
};
PeopleWithAffiliates.parameters = {
    docs: {
        description: {
            story: `Carte profil enrichie avec affiliations/organisations associées. Permet de montrer les relations et appartenances d'une personne.`,
        },
    },
};
Highlighted.parameters = {
    docs: {
        description: {
            story: `Carte mise en avant avec style visuel distinctif. Utilise un fond coloré et une typographie adaptée pour attirer l'attention sur un contenu prioritaire. Idéale pour mettre en évidence un article principal, une actualité importante ou un événement majeur dans une liste ou grille de cartes.`,
        },
    },
};
export const RoundedPicture = () => {
    const wrapper = document.createElement('div');
    wrapper.style.maxWidth = '300px';
    wrapper.innerHTML = /* HTML */ `
    <spw-card href="#" variant="rounded-picture">
      <spw-card-image ratio="2/3" hover-icon="fa-magnifying-glass">
        <img
          src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
          alt="Paysage"
        />
      </spw-card-image>
      <spw-card-content>
        <spw-card-title>Titre</spw-card-title>
        <spw-card-excerpt>Description</spw-card-excerpt>
      </spw-card-content>
    </spw-card>
  `;
    return wrapper;
};
RoundedPicture.parameters = {
    docs: {
        description: {
            story: `Carte avec image arrondie en haut du contenu. Utilise ratio="2/3" sur spw-card-image et hover-icon pour personnaliser l'icône au survol. Peut servir pour afficher notamment une galerie photo.`,
        },
        source: {
            code: /* HTML */ `
        <spw-card href="#" variant="rounded-picture">
          <spw-card-image ratio="2/3" hover-icon="fa-magnifying-glass">
            <img src="..." alt="..." />
          </spw-card-image>
          <spw-card-content>
            <spw-card-title>Titre</spw-card-title>
            <spw-card-excerpt>Description</spw-card-excerpt>
          </spw-card-content>
        </spw-card>
      `,
        },
    },
};
