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

Le composant Tile est un bloc visuel cliquable permettant aux utilisateurs de naviguer vers des pages ou de sélectionner des options. Il offre trois variantes adaptées à différents contextes d'utilisation.

## Structure

Le composant se compose de trois éléments :
- **spw-tile** : Conteneur principal avec gestion des variantes et interactions
- **spw-tile-title** : Titre de la tuile
- **spw-tile-description** : Description optionnelle (variant icon uniquement)

## Variantes disponibles

- **icon** : Tuile avec icône centrale, titre et description
- **light** : Tuile avec image de fond et titre en overlay
- **big** : Grande tuile avec image plein format et chevron d'action

## Fonctionnalités

- Trois variantes visuelles adaptées aux besoins
- Effets hover avec transitions fluides
- Support des icônes FontAwesome (variant icon)
- Images de fond avec overlay (variants light et big)
- Formats de hauteur personnalisables
- Indicateur visuel chevron sur variant big
- Rendu sémantique (div ou a selon href)

## Cas d'usage

- **Variant icon** : Accès rapides aux services, menu de fonctionnalités
- **Variant light** : Navigation par catégories, sections thématiques
- **Variant big** : Mise en avant de contenus majeurs, landing pages

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/3326e7-tuile-tile)
        `,
            },
        },
    },
};
export default meta;
function htmlContentIcon() {
    return /* HTML */ `
    <spw-icon icon="fa-paper-plane"></spw-icon>
    <spw-tile-title>Titre de ma tuile</spw-tile-title>
    <spw-tile-description>Description de ma tuile</spw-tile-description>
  `;
}
function htmlContentLight() {
    return /* HTML */ ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;
}
function htmlContentBig() {
    return /* HTML */ ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;
}
const TemplateIcon = 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 = htmlContentIcon();
    return element;
};
const TemplateLight = 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 = htmlContentLight();
    return element;
};
const TemplateBig = 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 = htmlContentBig();
    return element;
};
export const Icon = TemplateIcon.bind({});
Icon.args = {
    variant: 'icon',
    href: 'https://google.com',
    target: '_blank',
};
export const Light = TemplateLight.bind({});
Light.args = {
    variant: 'light',
    href: 'https://google.com',
    target: '_blank',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image de tuile',
};
export const Big = TemplateBig.bind({});
Big.args = {
    variant: 'big',
    href: 'https://google.com',
    target: '_blank',
    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
    imageAlt: 'Image de tuile',
};
Icon.parameters = {
    docs: {
        description: {
            story: `
Tuile avec icône centrale (fa-paper-plane), titre et description. Format compact et informatif, idéal pour les menus d'accès rapides.

Caractéristiques :
- Icône FontAwesome large et centrée
- Titre et description sur fond blanc
- Effet hover avec surbrillance
- Lien externe (target="_blank")

Cas d'usage : grille de services (contacts, formulaires, démarches), menu de fonctionnalités d'une application, portail d'outils avec description. La description aide à comprendre la fonction avant de cliquer.
      `,
        },
    },
};
Light.parameters = {
    docs: {
        description: {
            story: `
Tuile légère avec image de fond et titre en overlay. Format minimaliste et élégant, met l'accent sur le visuel.

Caractéristiques :
- Image de fond plein format
- Overlay semi-transparent
- Titre en blanc par-dessus l'image
- Format landscape par défaut (configurable : square, portrait)
- Effet hover avec zoom subtil de l'image

Cas d'usage : navigation par catégories thématiques (environnement, mobilité, emploi), galerie de sections, portail avec accès visuels aux grandes rubriques. L'image illustre directement le thème.
      `,
        },
    },
};
Big.parameters = {
    docs: {
        description: {
            story: `
Grande tuile avec image plein format, titre en overlay et icône chevron. Format impactant pour mise en avant de contenus majeurs.

Caractéristiques :
- Image de fond haute résolution
- Titre en blanc avec overlay gradient
- Icône chevron (fa-chevron-right) indiquant l'action
- Format landscape par défaut (configurable : square, portrait)
- Effet hover avec transition sur image et chevron

Cas d'usage : landing pages avec sections principales, mise en avant d'univers thématiques majeurs, portails institutionnels avec grandes rubriques. Le format généreux capte l'attention et valorise le contenu.
      `,
        },
    },
};
