import { withComponentControls, extractArgTypes } from "../../../utils/utils";
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 = {};
}
const elementTag = 'spw-table';
const subComponentTags = ['spw-table-body', 'spw-table-cell', 'spw-table-footer', 'spw-table-header', 'spw-table-head', 'spw-table-row'];
const argTypes = Object.assign(Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags)), { innerHTML: { table: { disable: true } } });
const meta = {
    title: 'Organismes/Tableau',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Tableau permet d'afficher et d'organiser efficacement de grandes quantités de données structurées. Il offre des fonctionnalités avancées de tri, filtrage et pagination pour faciliter la consultation et l'analyse des informations.

## Structure

Le composant se compose de six parties :
- **spw-table** : Le conteneur principal du tableau
- **spw-table-head** : En-tête du tableau
- **spw-table-header** : Cellule d'en-tête (colonnes)
- **spw-table-body** : Corps du tableau contenant les données
- **spw-table-row** : Ligne de données
- **spw-table-cell** : Cellule de données
- **spw-table-footer** : Pied de tableau pour pagination/infos

## Fonctionnalités

- Tri des colonnes avec indicateurs visuels
- Pagination intégrée
- Lignes sélectionnables avec checkboxes
- Support des états de ligne (sélection, désactivation)
- Filtres personnalisés par colonne via dropdown
- Actions contextuelles par ligne
- Support des tags et statuts
- Mode compact avec padding réduit
- Sticky header pour grands tableaux
- Skeleton loading pour chargement asynchrone
- Responsive avec scroll horizontal
- Accessibilité complète avec scope et aria

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)
        `,
            },
        },
    },
};
export default meta;
function camelToKebab(str) {
    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
}
const Template = args => {
    const container = document.createElement('spw-table-container');
    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)) {
            const kebabKey = camelToKebab(key);
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = args.innerHTML || '';
    container.appendChild(element);
    return container;
};
export const Base = Template.bind({});
Base.args = {
    innerHTML: `
    <spw-table-head>
      <spw-table-row>
        <spw-table-header scope="col">Header 1</spw-table-header>
        <spw-table-header scope="col">Header 2</spw-table-header>
        <spw-table-header scope="col">Header 3</spw-table-header>
        <spw-table-header scope="col">Header 4</spw-table-header>
      </spw-table-row>
    </spw-table-head>
    <spw-table-body>
      <spw-table-row>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
        <spw-table-cell>Cellule</spw-table-cell>
      </spw-table-row>
    </spw-table-body>
  `,
};
Base.parameters = {
    docs: {
        description: {
            story: `Tableau de base simple avec en-tête et plusieurs lignes de données. Exemple minimaliste pour afficher des données tabulaires sans fonctionnalités avancées.`,
        },
    },
};
export const StickyTableWithMaxHeight = Template.bind({});
StickyTableWithMaxHeight.args = {
    maxHeight: '225',
    minWidth: '800',
    isSticky: true,
    innerHTML: Base.args.innerHTML,
};
StickyTableWithMaxHeight.parameters = {
    docs: {
        description: {
            story: `Tableau avec en-tête fixe (sticky) et hauteur maximale. L'en-tête reste visible lors du scroll vertical, pratique pour les longs tableaux. Idéal pour améliorer la lisibilité des données volumineuses.`,
        },
    },
};
export const ZebraTableWithSorting = Template.bind({});
ZebraTableWithSorting.args = {
    isZebra: true,
    innerHTML: `
    <spw-table-head>
      <spw-table-row>
        <spw-table-header column-id="name" sortable scope="col">Nom</spw-table-header>
        <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
        <spw-table-header column-id="city" sortable scope="col">Ville</spw-table-header>
      </spw-table-row>
    </spw-table-head>
    <spw-table-body>
      <spw-table-row>
        <spw-table-cell>Zoé</spw-table-cell>
        <spw-table-cell>28</spw-table-cell>
        <spw-table-cell>Charleroi</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>Arthur</spw-table-cell>
        <spw-table-cell>35</spw-table-cell>
        <spw-table-cell>Namur</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>Micheline</spw-table-cell>
        <spw-table-cell>17</spw-table-cell>
        <spw-table-cell>Liège</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell>André</spw-table-cell>
        <spw-table-cell>84</spw-table-cell>
        <spw-table-cell>Tournai</spw-table-cell>
      </spw-table-row>
    </spw-table-body>
  `,
};
ZebraTableWithSorting.parameters = {
    docs: {
        description: {
            story: `Tableau avec lignes alternées (zebra) et tri sur colonnes. Cliquer sur un en-tête de colonne pour trier les données. Les rayures facilitent la lecture horizontale des lignes.`,
        },
    },
};
export const TableWithActionsAndTags = Template.bind({});
TableWithActionsAndTags.args = {
    isZebra: true,
    innerHTML: `
    <spw-table-head>
      <spw-table-row>
        <spw-table-header width="20" scope="col">
          <spw-checkbox></spw-checkbox>
        </spw-table-header>
        <spw-table-header tooltip-title="Information" tooltip-text="Ceci est une phrase d'exemple" column-id="name" sortable scope="col">
          Nom
          <spw-dropdown slot="filters" content-width="360" direction="bottom">
            <spw-icon icon="fa-filter">
              <div slot="dropdownContent">
                <h3 class="spw-ds-typography-heading-03">Filtrer la colonne nom</h3>
                <form>
                  <spw-text-field
                    required
                    size="small"
                    max-length="100"
                    min-length="3"
                    label="Champ texte"
                    type="text"
                    placeholder="Entrez un texte"
                    name="firstname"
                    class="mb-2"
                  ></spw-text-field>
                  <spw-custom-select
                    label="Mon label"
                    placeholder="Sélectionnez une option"
                    name="mon-super-select"
                    required="true"
                    multiple="true"
                    id="mon-custom-select-dynamique"
                    is-search="true"
                    class="mb-3"
                  ></spw-custom-select>
                  <spw-group label="Des choix horizontaux" required="true" type="radios" orientation="horizontal">
                    <spw-radio name="radio1" value="option1">Un input radio</spw-radio>
                    <spw-radio name="radio1" value="option2">Un input radio</spw-radio>
                  </spw-group>
                </form>
                <spw-group orientation="vertical" is-full-width>
                  <spw-button class="mt-3" is-full-width variant="primary" size="small">Appliquer</spw-button>
                </spw-group>
              </div>
            </spw-icon>
          </spw-dropdown>
        </spw-table-header>
        <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
        <spw-table-header column-id="status" sortable scope="col">Statut</spw-table-header>
        <spw-table-header text-align="center" scope="col">Actions</spw-table-header>
      </spw-table-row>
    </spw-table-head>
    <spw-table-body>
      <spw-table-row>
        <spw-table-cell width="20"><spw-checkbox></spw-checkbox></spw-table-cell>
        <spw-table-cell>Zoé</spw-table-cell>
        <spw-table-cell>28</spw-table-cell>
        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <div class="d-flex">
            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            <spw-dropdown direction="left">
              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
                <div slot="dropdownContent">
                  <spw-group orientation="vertical" is-full-width>
                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
                  </spw-group>
                </div>
              </spw-button>
            </spw-dropdown>
          </div>
        </spw-table-cell>
      </spw-table-row>
      <spw-table-row state="disabled">
        <spw-table-cell width="20"><spw-checkbox disabled="true"></spw-checkbox></spw-table-cell>
        <spw-table-cell>Marie</spw-table-cell>
        <spw-table-cell>22</spw-table-cell>
        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <div class="d-flex">
            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            <spw-dropdown direction="left">
              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
                <div slot="dropdownContent">
                  <spw-group orientation="vertical" is-full-width>
                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
                  </spw-group>
                </div>
              </spw-button>
            </spw-dropdown>
          </div>
        </spw-table-cell>
      </spw-table-row>
      <spw-table-row state="selected">
        <spw-table-cell width="20"><spw-checkbox checked="true"></spw-checkbox></spw-table-cell>
        <spw-table-cell>Thomas</spw-table-cell>
        <spw-table-cell>37</spw-table-cell>
        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <div class="d-flex">
            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            <spw-dropdown direction="left">
              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
                <div slot="dropdownContent">
                  <spw-group orientation="vertical" is-full-width>
                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
                  </spw-group>
                </div>
              </spw-button>
            </spw-dropdown>
          </div>
        </spw-table-cell>
      </spw-table-row>
    </spw-table-body>
    <spw-table-footer slot="table-footer">
      <div slot="left">1-10 sur 9999 éléments</div>
      <div slot="center">
        <spw-pagination variant="numbers" total-items="30" items-per-page="10"></spw-pagination>
      </div>
      <div slot="right">
        <spw-select placeholder="N°" name="mon-select-natif" size="medium">
          <option selected value="10">10</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
        </spw-select>
        éléments par page
      </div>
    </spw-table-footer>
  `,
};
TableWithActionsAndTags.parameters = {
    docs: {
        description: {
            story: `Tableau complexe avec sélection, filtres, actions et tags. Démontre toutes les fonctionnalités avancées : checkboxes de sélection, tooltips d'info, filtres par colonne, boutons d'actions, états de ligne (sélectionnée/désactivée), tags de statut et pagination complète. Idéal pour backoffices et interfaces d'administration.`,
        },
    },
};
export const CompactTable = Template.bind({});
CompactTable.args = {
    isZebra: true,
    innerHTML: `
    <spw-table-head>
      <spw-table-row>
        <spw-table-header padding="small" column-id="name" sortable scope="col">Nom</spw-table-header>
        <spw-table-header padding="small" column-id="age" sortable scope="col">Âge</spw-table-header>
        <spw-table-header padding="small" column-id="city" sortable scope="col">Ville</spw-table-header>
      </spw-table-row>
    </spw-table-head>
    <spw-table-body>
      <spw-table-row>
        <spw-table-cell padding="small">Zoé</spw-table-cell>
        <spw-table-cell padding="small">28</spw-table-cell>
        <spw-table-cell padding="small">Charleroi</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell padding="small">Arthur</spw-table-cell>
        <spw-table-cell padding="small">35</spw-table-cell>
        <spw-table-cell padding="small">Namur</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell padding="small">Micheline</spw-table-cell>
        <spw-table-cell padding="small">17</spw-table-cell>
        <spw-table-cell padding="small">Liège</spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell padding="small">André</spw-table-cell>
        <spw-table-cell padding="small">84</spw-table-cell>
        <spw-table-cell padding="small">Tournai</spw-table-cell>
      </spw-table-row>
    </spw-table-body>
  `,
};
CompactTable.parameters = {
    docs: {
        description: {
            story: `Tableau compact avec padding réduit (small). Idéal pour afficher plus de données dans un espace réduit tout en conservant la lisibilité. Parfait pour les dashboards ou interfaces nécessitant une vue densifiée.`,
        },
    },
};
export const LoadingWithSkeleton = Template.bind({});
LoadingWithSkeleton.args = {
    isZebra: true,
    innerHTML: `
    <spw-table-head>
      <spw-table-row>
        <spw-table-header width="20" scope="col">
          <spw-checkbox></spw-checkbox>
        </spw-table-header>
        <spw-table-header column-id="name" sortable scope="col">Nom</spw-table-header>
        <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
        <spw-table-header column-id="status" scope="col">Statut</spw-table-header>
        <spw-table-header text-align="center" scope="col">Actions</spw-table-header>
      </spw-table-row>
    </spw-table-head>
    <spw-table-body>
      <spw-table-row>
        <spw-table-cell width="20">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell width="40">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell width="20">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell width="40">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell width="20">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell width="40">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell width="20">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell width="40">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
      </spw-table-row>
      <spw-table-row>
        <spw-table-cell width="20">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell>
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell width="40">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
        <spw-table-cell padding="small" width="10">
          <spw-skeleton lines="1"></spw-skeleton>
        </spw-table-cell>
      </spw-table-row>
    </spw-table-body>
    <spw-table-footer slot="table-footer">
      <div slot="left">Chargement en cours...</div>
      <div slot="center">
        <spw-pagination variant="numbers" total-items="30" items-per-page="10"></spw-pagination>
      </div>
      <div slot="right">
        <spw-select placeholder="N°" name="mon-select-natif" size="medium">
          <option selected value="10">10</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
        </spw-select>
        éléments par page
      </div>
    </spw-table-footer>
  `,
};
LoadingWithSkeleton.parameters = {
    docs: {
        description: {
            story: `Tableau avec état de chargement utilisant des skeletons. Les placeholders animés simulent le chargement des données pour améliorer l'expérience utilisateur pendant les requêtes asynchrones. Évite les sauts de layout et rassure l'utilisateur pendant l'attente.`,
        },
    },
};
const TemplateContainer = args => {
    const container = document.createElement('spw-table-container');
    container.innerHTML = args.innerHTML || '';
    return container;
};
export const WithContainer = TemplateContainer.bind({});
WithContainer.args = {
    innerHTML: `
    <spw-table is-sticky="true" is-zebra="true" max-width="1000" max-height="600">
      <spw-table-head>
        <spw-table-row>
          <spw-table-header width="20" scope="col" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-header>
          <spw-table-header column-id="name" sortable scope="col">Nom</spw-table-header>
          <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
          <spw-table-header column-id="status" sortable scope="col">Statut</spw-table-header>
          <spw-table-header text-align="center" scope="col" sticky sticky-position="end">Actions</spw-table-header>
        </spw-table-row>
      </spw-table-head>
      <spw-table-body>
        <spw-table-row state="selected">
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox checked="true"></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Zoé</spw-table-cell>
          <spw-table-cell>28</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
        <spw-table-row>
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Arthur</spw-table-cell>
          <spw-table-cell>35</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="orange">En attente</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
        <spw-table-row>
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Marie</spw-table-cell>
          <spw-table-cell>22</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
      </spw-table-body>
      <spw-table-footer slot="table-footer">
        <div slot="left">1-10 sur 9999 éléments</div>
        <div slot="center">
          <spw-pagination variant="numbers" total-items="100" items-per-page="10"></spw-pagination>
        </div>
        <div slot="right">
          <spw-select placeholder="N°" name="items-per-page" size="medium">
            <option selected value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
          </spw-select>
          éléments par page
        </div>
      </spw-table-footer>
    </spw-table>
  `,
};
WithContainer.parameters = {
    docs: {
        description: {
            story: `Tableau avec spw-table-container. Le container permet de gérer le scroll horizontal et de déplacer le footer en dehors du tableau pour éviter les problèmes de scroll. Les colonnes sticky (première et dernière) restent fixes lors du scroll horizontal. Le footer est positionné sous le tableau et ne scrolle pas avec le contenu.`,
        },
    },
};
export const WithSidebar = TemplateContainer.bind({});
WithSidebar.args = {
    innerHTML: `
    <spw-table-sidebar sidebar-title="Filtres de recherche" sidebar-icon="fa-filter">
      <spw-text-field label="Nom" placeholder="Entrez un nom" name="filter-name" size="small" class="mb-3"></spw-text-field>
      <spw-text-field label="Email" type="email" placeholder="exemple@email.com" name="filter-email" size="small" class="mb-3"></spw-text-field>
      <spw-select placeholder="Sélectionner" label="Statut" name="filter-status" size="small" class="mb-3">
        <option value="">Tous</option>
        <option value="actif">Actif</option>
        <option value="inactif">Inactif</option>
        <option value="suspendu">Suspendu</option>
      </spw-select>
      <spw-group label="Type" type="checkboxes" orientation="vertical" class="mb-2">
        <spw-checkbox name="type-1" value="type1">Type 1</spw-checkbox>
        <spw-checkbox name="type-2" value="type2">Type 2</spw-checkbox>
        <spw-checkbox name="type-3" value="type3">Type 3</spw-checkbox>
      </spw-group>
      <div slot="sidebar-footer">
        <spw-button size="small" variant="secondary" is-full-width>Rechercher</spw-button>
      </div>
    </spw-table-sidebar>
    <spw-table is-sticky="true" is-zebra="true" max-width="1000" max-height="600">
      <spw-table-head>
        <spw-table-row>
          <spw-table-header width="20" scope="col" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-header>
          <spw-table-header tooltip-title="Information" tooltip-text="Ceci est une phrase d'exemple" column-id="name" sortable scope="col">
            Nom
            <spw-dropdown slot="filters" direction="bottom">
              <spw-icon icon="fa-filter">
                <div slot="dropdownContent">
                  <h3 class="spw-ds-typography-heading-03">Filtrer la colonne nom</h3>
                  <form>
                    <spw-text-field
                      required
                      size="small"
                      max-length="100"
                      min-length="3"
                      label="Champ texte"
                      type="text"
                      placeholder="Entrez un texte"
                      name="firstname"
                      class="mb-2"
                    ></spw-text-field>
                    <spw-custom-select
                      label="Mon label"
                      placeholder="Sélectionnez une option"
                      name="mon-super-select"
                      required="true"
                      multiple="true"
                      is-search="true"
                      class="mb-3"
                    ></spw-custom-select>
                  </form>
                  <spw-group orientation="vertical" is-full-width>
                    <spw-button class="mt-3" is-full-width variant="primary" size="small">Appliquer</spw-button>
                  </spw-group>
                </div>
              </spw-icon>
            </spw-dropdown>
          </spw-table-header>
          <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
          <spw-table-header column-id="status" sortable scope="col">Statut</spw-table-header>
          <spw-table-header text-align="center" scope="col" sticky sticky-position="end">Actions</spw-table-header>
        </spw-table-row>
      </spw-table-head>
      <spw-table-body>
        <spw-table-row state="selected">
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox checked="true"></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Zoé</spw-table-cell>
          <spw-table-cell>28</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
        <spw-table-row>
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Arthur</spw-table-cell>
          <spw-table-cell>35</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="orange">En attente</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
        <spw-table-row>
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Marie</spw-table-cell>
          <spw-table-cell>22</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
        <spw-table-row>
          <spw-table-cell width="20" sticky sticky-position="start">
            <spw-checkbox></spw-checkbox>
          </spw-table-cell>
          <spw-table-cell>Thomas</spw-table-cell>
          <spw-table-cell>37</spw-table-cell>
          <spw-table-cell width="40"><spw-tag size="small" variant="red">Refusé</spw-tag></spw-table-cell>
          <spw-table-cell padding="small" width="10" sticky sticky-position="end">
            <div class="d-flex">
              <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
              <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
            </div>
          </spw-table-cell>
        </spw-table-row>
      </spw-table-body>
      <spw-table-footer slot="table-footer">
        <div slot="left">1-10 sur 9999 éléments</div>
        <div slot="center">
          <spw-pagination variant="numbers" total-items="100" items-per-page="10"></spw-pagination>
        </div>
        <div slot="right">
          <spw-select placeholder="N°" name="items-per-page" size="medium">
            <option selected value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
          </spw-select>
          éléments par page
        </div>
      </spw-table-footer>
    </spw-table>
  `,
};
WithSidebar.parameters = {
    docs: {
        description: {
            story: `Tableau avec sidebar de filtres globaux et table-container. La sidebar expandable permet d'ajouter des filtres globaux qui s'appliquent à l'ensemble du tableau. Elle contient des champs de formulaire (texte, email, select, checkboxes) et un bouton de recherche dans le footer. La sidebar peut être ouverte/fermée via le bouton avec icône de filtre. Idéal pour les backoffices nécessitant des fonctionnalités de filtrage avancées en complément des filtres par colonne.`,
        },
    },
};
