import type { Meta, StoryObj } from '@storybook/vue3'
import { fn } from '@storybook/test'
import { computed, defineComponent, ref } from 'vue'
import SyTable from './SyTable.vue'
import type { DataOptions, FilterType } from '../common/types'
import type { VDataTable } from 'vuetify/components'
import dayjs from 'dayjs'
import { mdiChevronDown, mdiChevronUp } from '@mdi/js'

const meta = {
	title: 'Composants/Tableaux/SyTable',
	component: SyTable,
	decorators: [
		() => ({
			template: '<div style="padding: 20px;"><story/></div>',
		}),
	],
	parameters: {
		layout: 'fullscreen',
	},
	argTypes: {
		'headers': {
			description: 'Liste des colonnes du tableau (voir : https://vuetifyjs.com/en/api/v-data-table/#props-headers)',
			control: { type: 'object' },
			table: {
				category: 'props',
			},
		},
		'items': {
			description: 'Liste des éléments à afficher dans le tableau',
			control: { type: 'object' },
			table: {
				category: 'props',
				defaultValue: {
					summary: '[]',
				},
			},
		},
		'density': {
			description: 'Définit la densité du tableau',
			control: { type: 'select' },
			options: ['default', 'comfortable', 'compact'],
			table: {
				category: 'props',
				type: { summary: 'string', detail: `'default' | 'comfortable' | 'compact'` },
			},
		},
		'striped': {
			description: 'Affiche les lignes du tableau avec un fond rayé',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
			},
		},
		'options': {
			description: 'Options de configuration du tableau',
			name: 'v-model:options',
			control: { type: 'object' },
			table: {
				category: 'props',
				type: { summary: 'DataOptions', detail: '{ page: number, itemsPerPage: number, sortBy: SortOptions[], groupBy?: SortOptions[], multiSort?: boolean, mustSort?: boolean, filters?: FilterOption[] }' },
			},
		},
		'itemsPerPageOptions': {
			description: 'Limite les options disponibles dans le sélecteur "itemsPerPage"',
			control: { type: 'object' },
			table: {
				category: 'props',
				type: { summary: 'number[]' },
				defaultValue: { summary: 'undefined' },
			},
		},
		'saveState': {
			description: 'Permet d\'activer ou non la sauvegarde des options (pagination, tris, ordre des colonnes) du tableau dans le localStorage. Par défaut, cette fonctionnalité est activée.',
			control: { type: 'boolean' },
		},
		'suffix': {
			description: 'Suffixe permettant de gérer individuellement le stockage des options d\'un tableau d\'une page à l\'autre. Ce prop est obligatoire pour garantir un stockage unique pour chaque tableau.',
			control: { type: 'text' },
			table: {
				category: 'props',
				type: { summary: 'string' },
			},
			required: true,
		},
		'showExpand': {
			description: 'Affiche une colonne permettant d\'étendre les lignes pour afficher du contenu supplémentaire',
			control: { type: 'boolean' },
			table: {
				category: 'props',
			},
		},
		'resizableColumns': {
			description: 'Permet de redimensionner les colonnes du tableau',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
			},
		},
		'multiSort': {
			description: 'Permet de trier sur plusieurs colonnes simultanément. Lorsque activé, des indicateurs numériques apparaissent à côté des icônes de tri pour montrer l\'ordre de priorité.',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
				defaultValue: {
					summary: 'false',
				},
			},
		},
		'mustSort': {
			description: 'Force au moins une colonne à être toujours triée. Si désactivé, toutes les colonnes peuvent être non triées.',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
				defaultValue: {
					summary: 'false',
				},
			},
		},
		'caption': {
			description: 'Texte de la légende du tableau',
			control: { type: 'text' },
		},
		'showFilters': {
			description: 'Affiche les filtres au-dessus du tableau',
			control: { type: 'boolean' },
		},
		'enableColumnControls': {
			description: 'Allow the users to re-organize the columns',
			table: {
				defaultValue: {
					summary: 'false',
				},
				type: { summary: 'boolean' },
				category: 'props',
			},
			control: { type: 'boolean' },
		},
		'showSelect': {
			description: 'Affiche des cases à cocher pour sélectionner des lignes',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
			},
		},
		'showSelectSingle': {
			description: 'Affiche des cases à cocher pour sélectionner une seule ligne à la fois',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
			},
		},
		'stickySelect': {
			description: 'Rend la colonne de sélection (cases à cocher) sticky à gauche quand showSelect ou showSelectSingle est activé.',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
				defaultValue: {
					summary: 'false',
				},
			},
		},
		'pinnedColumns': {
			description: 'Liste des colonnes à épingler (sticky). Chaque entrée peut être une clé de colonne (string) ou un objet `{ key: string, side?: \'left\' | \'right\' }`. Par défaut, les colonnes sont épinglées à gauche.',
			control: { type: 'object' },
			table: {
				category: 'props',
				type: { summary: 'Array<string | { key: string, side?: \'left\' | \'right\' }>' },
				defaultValue: { summary: 'undefined' },
			},
		},
		'pinnedColumnKey': {
			description: 'Raccourci pour épingler une seule colonne à gauche. Équivalent à `pinnedColumns: [key]`. Ignoré si `pinnedColumns` est défini.',
			control: { type: 'text' },
			table: {
				category: 'props',
				type: { summary: 'string' },
				defaultValue: { summary: 'undefined' },
			},
		},
		'selectionKey': {
			description: 'Clé utilisée pour identifier chaque ligne lors de la sélection. Par défaut, utilise "id" si présent, sinon l\'objet complet.',
			control: { type: 'text' },
			table: {
				category: 'props',
				type: { summary: 'string' },
				defaultValue: { summary: 'undefined (fallback: id | objet complet)' },
			},
		},
		'clickableRow': {
			description: 'Rend chaque ligne cliquable. Quand cette prop est activée, la ligne devient focusable au clavier et émet `row-click` sur clic, `Entrée` ou `Espace`, sans interférer avec les éléments interactifs imbriqués.',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
				defaultValue: { summary: 'false' },
			},
		},
		'pageInput': {
			description: 'Affiche un champ de saisie numérique dans la pagination permettant de naviguer directement vers une page en la saisissant au clavier. La navigation est déclenchée à la validation (`Entrée`) ou à la perte de focus. La valeur est automatiquement clampée entre 1 et le nombre total de pages.',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
				defaultValue: { summary: 'false' },
			},
		},
		'hideDefaultFooter': {
			description: 'Masque le footer par défaut du tableau (pagination et contrôles de page). Utile lorsque l\'on souhaite gérer la pagination manuellement ou ne pas en afficher.',
			control: { type: 'boolean' },
			table: {
				category: 'props',
				type: { summary: 'boolean' },
				defaultValue: { summary: 'false' },
			},
		},
		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore - 'cookie-description-${cookieName}' storybook can't infer dynamic slot name
		'header.<columnKey>': {
			description: 'Slot permettant de personnaliser le rendu de l\'en-tête d\'une colonne spécifique. Remplacer `<columnKey>` par la clé de la colonne souhaitée.',
			control: undefined,
			table: {
				category: 'slots',
				type: {
					summary: 'slot',
					detail: `{
						column: HeaderColumn,
						headers: HeaderColumn[][],
						columns: HeaderColumn[],
						locales: Record<string, string | ((...args: any[]) => string)>,
						sortBy: DataOptions['sortBy'],
						someSelected: boolean,
						allSelected: boolean
					}`,
				},
			},
		},
		'onRow-click': {
			description: 'Émis lorsqu\'une ligne est activée alors que `clickableRow` est à `true`. Reçoit l\'objet de la ligne en paramètre. Les interactions avec des éléments déjà interactifs dans la ligne ne déclenchent pas cet événement.',
			table: {
				category: 'events',
				type: { summary: '(item: Record<string, unknown>) => void' },
			},
		},
	},
} satisfies Meta<typeof SyTable & typeof VDataTable>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="default-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'caption': '',
		'suffix': 'default-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				/>
			`,
		}
	},
}

export const SortBy: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="sort-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
						sortBy: [
							{
								key: 'lastname',
								order: 'desc',
							},
						],
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
							title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 4,
			sortBy: [
				{
					key: 'lastname',
					order: 'desc',
				},
			],
		},
		'suffix': 'sort-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				/>
			`,
		}
	},
}

export const MultiSort: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<div>
						<p class="mb-4">
							Cet exemple montre le tri multiple avec des indicateurs d'ordre de priorité.
							Les chiffres à côté des icônes de tri indiquent l'ordre de priorité du tri.
						</p>
						<SyTable
							v-model:options="options"
							:headers="headers"
							:items="items"
							:multi-sort="true"
							suffix="multi-sort-table"
						/>
					</div>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
						multiSort: true,
						sortBy: [
							{
								key: 'lastname',
								order: 'desc',
							},
							{
								key: 'firstname',
								order: 'asc',
							},
						],
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
						{
                            title: 'Ville',
							key: 'city',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
							city: 'Paris',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
							city: 'Lyon',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
							city: 'Marseille',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
							city: 'Toulouse',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com',
							city: 'Nice',
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com',
							city: 'Bordeaux',
						},
						{
							firstname: 'Agate',
							lastname: 'Beauchesne',
							email: 'agate.beauchesne@exemple.com',
							city: 'Lille',
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
			{
				title: 'Ville',
				key: 'city',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
				city: 'Paris',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
				city: 'Lyon',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
				city: 'Marseille',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
				city: 'Toulouse',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
				city: 'Nice',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
				city: 'Bordeaux',
			},
			{
				firstname: 'Agate',
				lastname: 'Beauchesne',
				email: 'agate.beauchesne@exemple.com',
				city: 'Lille',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 4,
			multiSort: true,
			sortBy: [
				{
					key: 'lastname',
					order: 'desc',
				},
				{
					key: 'firstname',
					order: 'asc',
				},
			],
		},
		'suffix': 'multi-sort-table',
		'density': 'default',
		'striped': false,
		'multiSort': true,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<div>
					<p class="mb-4">
						Cet exemple montre le tri multiple avec des indicateurs d'ordre de priorité.
						Les chiffres à côté des icônes de tri indiquent l'ordre de priorité du tri.
					</p>
					<SyTable
						v-model:options="args.options"
						v-bind="args"
						suffix="multi-sort-table"
					/>
				</div>
			`,
		}
	},
}

export const FilterByText: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="filter-text-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
						filters: []
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Prénom',
							key: 'firstname',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Email',
							value: 'email',
							filterable: true,
							filterType: 'text'
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Prénom',
				key: 'firstname',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Email',
				value: 'email',
				filterable: true,
				filterType: 'text',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 4,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-text-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-text-table"
				/>
			`,
		}
	},
}

export const FilterByNumber: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="filter-number-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 5,
						filters: []
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'name',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Âge',
							key: 'age',
							filterable: true,
							filterType: 'number'
						},
						{
							title: 'Salaire',
							key: 'salary',
							filterable: true,
							filterType: 'number'
						},
					])
						
					const items = ref([
						{
							name: 'Jean Dupont',
							age: 32,
							salary: 45000,
						},
						{
							name: 'Marie Martin',
							age: 28,
							salary: 52000,
						},
						{
							name: 'Pierre Durand',
							age: 45,
							salary: 65000,
						},
						{
							name: 'Sophie Petit',
							age: 36,
							salary: 48000,
						},
						{
							name: 'Thomas Leroy',
							age: 41,
							salary: 58000,
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'name',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Âge',
				key: 'age',
				filterable: true,
				filterType: 'number',
			},
			{
				title: 'Salaire',
				key: 'salary',
				filterable: true,
				filterType: 'number',
			},
		],
		'items': [
			{
				name: 'Jean Dupont',
				age: 32,
				salary: 45000,
			},
			{
				name: 'Marie Martin',
				age: 28,
				salary: 52000,
			},
			{
				name: 'Pierre Durand',
				age: 45,
				salary: 65000,
			},
			{
				name: 'Sophie Petit',
				age: 36,
				salary: 48000,
			},
			{
				name: 'Thomas Leroy',
				age: 41,
				salary: 58000,
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 5,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-number-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-number-table"
				/>
			`,
		}
	},
}

export const FilterBySelect: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="filter-select-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 5,
						filters: []
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'name',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Département',
							key: 'department',
							filterable: true,
							filterType: 'select',
							multiple: false,
							chips: false,
							hideMessages: true,
							filterOptions: [
								{ text: 'RH', value: 'RH' },
								{ text: 'IT', value: 'IT' },
								{ text: 'Finance', value: 'Finance' },
								{ text: 'Marketing', value: 'Marketing' },
							]
						},
						{
							title: 'Statut',
							key: 'status',
							filterable: true,
							filterType: 'select',
							multiple: false,
							chips: false,
							hideMessages: true,
							filterOptions: [
								{ text: 'Actif', value: 'Actif' },
								{ text: 'En congé', value: 'En congé' },
								{ text: 'Inactif', value: 'Inactif' },
							]
						},
					])
						
					const items = ref([
						{
							name: 'Jean Dupont',
							department: 'RH',
							status: 'Actif',
						},
						{
							name: 'Marie Martin',
							department: 'IT',
							status: 'En congé',
						},
						{
							name: 'Pierre Durand',
							department: 'Finance',
							status: 'Actif',
						},
						{
							name: 'Sophie Petit',
							department: 'Marketing',
							status: 'Actif',
						},
						{
							name: 'Thomas Leroy',
							department: 'IT',
							status: 'Inactif',
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'name',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Département',
				key: 'department',
				filterable: true,
				filterType: 'select',
				multiple: false,
				chips: false,
				hideMessages: true,
				filterOptions: [
					{ text: 'RH', value: 'RH' },
					{ text: 'IT', value: 'IT' },
					{ text: 'Finance', value: 'Finance' },
					{ text: 'Marketing', value: 'Marketing' },
				],
			},
			{
				title: 'Statut',
				key: 'status',
				filterable: true,
				filterType: 'select',
				multiple: false,
				chips: false,
				hideMessages: true,
				filterOptions: [
					{ text: 'Actif', value: 'Actif' },
					{ text: 'En congé', value: 'En congé' },
					{ text: 'Inactif', value: 'Inactif' },
				],
			},
		],
		'items': [
			{
				name: 'Jean Dupont',
				department: 'RH',
				status: 'Actif',
			},
			{
				name: 'Marie Martin',
				department: 'IT',
				status: 'En congé',
			},
			{
				name: 'Pierre Durand',
				department: 'Finance',
				status: 'Actif',
			},
			{
				name: 'Sophie Petit',
				department: 'Marketing',
				status: 'Actif',
			},
			{
				name: 'Thomas Leroy',
				department: 'IT',
				status: 'Inactif',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 5,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-select-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-select-table"
				/>
			`,
		}
	},
}

export const FilterBySelectMultiple: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="filter-select-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 5,
						filters: []
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'name',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Département',
							key: 'department',
							filterable: true,
							filterType: 'select',
							multiple: true,
							chips: true,
							hideMessages: true,
							filterOptions: [
								{ text: 'RH', value: 'RH' },
								{ text: 'IT', value: 'IT' },
								{ text: 'Finance', value: 'Finance' },
								{ text: 'Marketing', value: 'Marketing' },
							]
						},
						{
							title: 'Statut',
							key: 'status',
							filterable: true,
							multiple: true,
							chips: true,
							filterType: 'select',
							hideMessages: true,
							filterOptions: [
								{ text: 'Actif', value: 'Actif' },
								{ text: 'En congé', value: 'En congé' },
								{ text: 'Inactif', value: 'Inactif' },
							]
						},
					])
						
					const items = ref([
						{
							name: 'Jean Dupont',
							department: 'RH',
							status: 'Actif',
						},
						{
							name: 'Marie Martin',
							department: 'IT',
							status: 'En congé',
						},
						{
							name: 'Pierre Durand',
							department: 'Finance',
							status: 'Actif',
						},
						{
							name: 'Sophie Petit',
							department: 'Marketing',
							status: 'Actif',
						},
						{
							name: 'Thomas Leroy',
							department: 'IT',
							status: 'Inactif',
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'name',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Département',
				key: 'department',
				filterable: true,
				filterType: 'select',
				multiple: true,
				chips: true,
				hideMessages: true,
				filterOptions: [
					{ text: 'RH', value: 'RH' },
					{ text: 'IT', value: 'IT' },
					{ text: 'Finance', value: 'Finance' },
					{ text: 'Marketing', value: 'Marketing' },
				],
			},
			{
				title: 'Statut',
				key: 'status',
				filterable: true,
				filterType: 'select',
				multiple: true,
				chips: true,
				hideMessages: true,
				filterOptions: [
					{ text: 'Actif', value: 'Actif' },
					{ text: 'En congé', value: 'En congé' },
					{ text: 'Inactif', value: 'Inactif' },
				],
			},
		],
		'items': [
			{
				name: 'Jean Dupont',
				department: 'RH',
				status: 'Actif',
			},
			{
				name: 'Marie Martin',
				department: 'IT',
				status: 'En congé',
			},
			{
				name: 'Pierre Durand',
				department: 'Finance',
				status: 'Actif',
			},
			{
				name: 'Sophie Petit',
				department: 'Marketing',
				status: 'Actif',
			},
			{
				name: 'Thomas Leroy',
				department: 'IT',
				status: 'Inactif',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 5,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-select-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-select-table"
				/>
			`,
		}
	},
}

export const FilterByAutocomplete: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="filter-autocomplete-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'

					const options = ref({
						itemsPerPage: 5,
						filters: []
					})

					const headers = ref([
						{
							title: 'Nom',
							key: 'name',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Département',
							key: 'department',
							filterable: true,
							filterType: 'autocomplete',
							filterOptions: [
								{ text: 'RH', value: 'RH' },
								{ text: 'IT', value: 'IT' },
								{ text: 'Finance', value: 'Finance' },
								{ text: 'Marketing', value: 'Marketing' },
							]
						},
						{
							title: 'Statut',
							key: 'status',
							filterable: true,
							filterType: 'autocomplete',
							multiple: true,
							chips: true,
							filterOptions: [
								{ text: 'Actif', value: 'Actif' },
								{ text: 'En congé', value: 'En congé' },
								{ text: 'Inactif', value: 'Inactif' },
							]
						},
					])

					const items = ref([
						{ name: 'Jean Dupont', department: 'RH', status: 'Actif' },
						{ name: 'Marie Martin', department: 'IT', status: 'En congé' },
						{ name: 'Pierre Durand', department: 'Finance', status: 'Actif' },
						{ name: 'Sophie Petit', department: 'Marketing', status: 'Actif' },
						{ name: 'Thomas Leroy', department: 'IT', status: 'Inactif' },
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'name',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Département',
				key: 'department',
				filterable: true,
				filterType: 'autocomplete',
				filterOptions: [
					{ text: 'RH', value: 'RH' },
					{ text: 'IT', value: 'IT' },
					{ text: 'Finance', value: 'Finance' },
					{ text: 'Marketing', value: 'Marketing' },
				],
			},
			{
				title: 'Statut',
				key: 'status',
				filterable: true,
				filterType: 'autocomplete',
				multiple: true,
				chips: true,
				filterOptions: [
					{ text: 'Actif', value: 'Actif' },
					{ text: 'En congé', value: 'En congé' },
					{ text: 'Inactif', value: 'Inactif' },
				],
			},
		],
		'items': [
			{ name: 'Jean Dupont', department: 'RH', status: 'Actif' },
			{ name: 'Marie Martin', department: 'IT', status: 'En congé' },
			{ name: 'Pierre Durand', department: 'Finance', status: 'Actif' },
			{ name: 'Sophie Petit', department: 'Marketing', status: 'Actif' },
			{ name: 'Thomas Leroy', department: 'IT', status: 'Inactif' },
		],
		'caption': '',
		'options': {
			itemsPerPage: 5,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-autocomplete-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-autocomplete-table"
				/>
			`,
		}
	},
}

export const FilterByExactDate: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						:show-filters="true"
						suffix="filter-date-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					import dayjs from 'dayjs';
					
					const options = ref({
						itemsPerPage: 5,
						filters: [],
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'name',
							filterable: true,
							filterType: 'text',
						},
						{
							title: 'Date d'embauche',
							key: 'hireDate',
							filterable: true,
							filterType: 'date',
							dateFormat: 'DD/MM/YYYY',
						},
					])
					
					const items = ref([
						{
							name: 'Jean Dupont',
							hireDate: dayjs('2020-05-15').format('DD/MM/YYYY'),
						},
						{
							name: 'Marie Martin',
							hireDate: dayjs('2019-03-10').format('DD/MM/YYYY'),
						},
						{
							name: 'Pierre Dupont',
							hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
						},
						{
							name: 'Sophie Garnier',
							hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
						},
						{
							name: 'Thomas Leroy',
							hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'name',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Date d\'embauche',
				key: 'hireDate',
				filterable: true,
				filterType: 'date',
				dateFormat: 'DD/MM/YYYY',
			},
		],
		'items': [
			{
				name: 'Jean Dupont',
				hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
			},
			{
				name: 'Marie Martin',
				hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
			},
			{
				name: 'Pierre Durand',
				hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
			},
			{
				name: 'Sophie Petit',
				hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
			},
			{
				name: 'Thomas Leroy',
				hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 5,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-date-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-date-table"
				/>
			`,
		}
	},
}

export const FilterByPeriod: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						:show-filters="true"
						suffix="filter-date-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					import dayjs from 'dayjs';
					
					const options = ref({
						itemsPerPage: 5,
						filters: [],
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'name',
							filterable: true,
							filterType: 'text',
						},
						{
							title: 'Date d'embauche',
							key: 'hireDate',
							filterable: true,
							filterType: 'period',
							dateFormat: 'DD/MM/YYYY',
						},
					])
					
					const items = ref([
						{
							name: 'Jean Dupont',
							hireDate: dayjs('2020-05-15').format('DD/MM/YYYY'),
						},
						{
							name: 'Marie Martin',
							hireDate: dayjs('2019-03-10').format('DD/MM/YYYY'),
						},
						{
							name: 'Pierre Dupont',
							hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
						},
						{
							name: 'Sophie Garnier',
							hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
						},
						{
							name: 'Thomas Leroy',
							hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'name',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Date d\'embauche',
				key: 'hireDate',
				filterable: true,
				filterType: 'period',
				dateFormat: 'DD/MM/YYYY',
			},
		],
		'items': [
			{
				name: 'Jean Dupont',
				hireDate: dayjs('2025-05-15').format('DD/MM/YYYY'),
			},
			{
				name: 'Marie Martin',
				hireDate: dayjs('2025-03-10').format('DD/MM/YYYY'),
			},
			{
				name: 'Pierre Durand',
				hireDate: dayjs('2025-11-22').format('DD/MM/YYYY'),
			},
			{
				name: 'Sophie Petit',
				hireDate: dayjs('2025-01-08').format('DD/MM/YYYY'),
			},
			{
				name: 'Thomas Leroy',
				hireDate: dayjs('2025-07-30').format('DD/MM/YYYY'),
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 5,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'filter-date-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-date-table"
				/>
			`,
		}
	},
}

export const CustomFilterSlot: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		docs: {
			description: {
				story: 'Cette story démontre comment utiliser un slot personnalisé pour le filtrage. Le filtre personnalisé utilise un v-select pour filtrer par statut.',
			},
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-filters
						suffix="custom-filter-slot-table"
					>
						<template #filter.custom="{ header, updateFilter }">
							<div class="custom-filter-container">
								<div class="custom-filter-info mb-2">
									Filtre personnalisé :
								</div>
								<v-select
									v-model="customFilterValue"
									:items="statusOptions"
									label="Statut"
									variant="outlined"
									density="compact"
									color="primary"
									bg-color="white"
									@update:model-value="(val) => {
										// Use updateFilter provided by the slot props
										updateFilter(val);
										// Also update our local state
										handleFilterChange(val);
									}"
								/>
							</div>
						</template>
					</SyTable>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						page: 1,
						itemsPerPage: 4,
						filters: []
					})
					
					const customFilterValue = ref('')
					const statusOptions = ['Actif', 'Inactif', 'En attente']
					
					// Function to update the filter when the select value changes
					function handleFilterChange(val) {
						// Create a new filters array
						const newFilters = options.value.filters.filter(f => f.key !== 'status')
						
						// Add the new filter if a value is selected
						if (val) {
							newFilters.push({
								key: 'status',
								value: val,
								type: 'select' // Use 'select' type for compatibility with filtering logic
							})
						}
						
						// Update the options with the new filters
						options.value = {
							...options.value,
							filters: newFilters
						}
					}
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Prénom',
							key: 'firstname',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Statut',
							key: 'status',
							filterable: true,
							filterType: 'custom' // Utilisation du type 'custom' pour activer le slot personnalisé
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							status: 'Actif',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							status: 'Inactif',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							status: 'En attente',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							status: 'Actif',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							status: 'Inactif'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							status: 'En attente'
						}
					])
				</script>
				`,
			},
			{
				name: 'Style',
				code: `
				<style scoped>
					.custom-filter-container {
						display: flex;
						flex-direction: column;
						gap: 4px;
					}
					
					.custom-filter-info {
						font-size: 12px;
						color: #666;
						margin-top: 4px;
					}
				</style>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Prénom',
				key: 'firstname',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Statut',
				key: 'status',
				filterable: true,
				filterType: 'custom',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				status: 'Actif',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				status: 'Inactif',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				status: 'En attente',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				status: 'Actif',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				status: 'Inactif',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				status: 'En attente',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 4,
			filters: [],
		},
		'showFilters': true,
		'suffix': 'custom-filter-slot-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create a fresh copy of the options to avoid reactivity issues
				const options = ref<DataOptions>({
					page: 1,
					itemsPerPage: 4,
					filters: [] as import('../common/types').FilterOption[],
					sortBy: [],
				})

				// Create a reactive reference for the custom filter value
				const customFilterValue = ref('')
				const statusOptions = ['Actif', 'Inactif', 'En attente']

				// Function to update the filter when the select value changes
				function handleFilterChange(val) {
					// Ensure options.value.filters is initialized
					if (!options.value.filters) {
						options.value.filters = []
					}

					// Create a new filters array with proper typing
					const currentFilters = options.value.filters as import('../common/types').FilterOption[]
					const newFilters = [...currentFilters].filter(f => f.key !== 'status')

					// Add the new filter if a value is selected
					if (val) {
						newFilters.push({
							key: 'status',
							value: val,
							type: 'select' as FilterType, // Use 'select' type for compatibility with filtering logic
						})
					}

					// Update the options with the new filters
					options.value = {
						...options.value,
						filters: newFilters,
					}
				}

				return {
					args,
					options,
					customFilterValue,
					statusOptions,
					handleFilterChange,
				}
			},
			template: `
				<SyTable
					v-model:options="options"
					:headers="args.headers"
					:items="args.items"
					show-filters
					suffix="custom-filter-slot-table"
				>
					<template #filter.custom="{ header, updateFilter }">
						<div class="custom-filter-container">
							<div class="custom-filter-info mb-2">
								Filtre personnalisé :
							</div>
							<v-select
								v-model="customFilterValue"
								:items="statusOptions"
								label="Statut"
								variant="outlined"
								density="compact"
								color="primary"
								bg-color="white"
								@update:model-value="(val) => {
									// Use updateFilter provided by the slot props
									updateFilter(val);
									// Also update our local state
									handleFilterChange(val);
								}"
							/>
						</div>
					</template>
				</SyTable>
			`,
		}
	},
}

export const CustomFilterInputs: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						:filter-input-config="filterInputConfig"
						show-filters
						suffix="filter-text-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
						filters: []
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Prénom',
							key: 'firstname',
							filterable: true,
							filterType: 'text'
						},
						{
							title: 'Email',
							value: 'email',
							filterable: true,
							filterType: 'text'
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
					
					const filterInputConfig = ref({
						variant: 'outlined',
						density: 'comfortable',
						hideDetails: true,
						clearable: false,
						disableErrorHandling: true,
					})
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Prénom',
				key: 'firstname',
				filterable: true,
				filterType: 'text',
			},
			{
				title: 'Email',
				value: 'email',
				filterable: true,
				filterType: 'text',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'caption': '',
		'options': {
			itemsPerPage: 4,
			filters: [],
		},
		'filterInputConfig': {
			variant: 'outlined',
			density: 'comfortable',
			hideDetails: true,
			clearable: false,
			disableErrorHandling: true,
		},
		'showFilters': true,
		'suffix': 'filter-text-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				// Create reactive references
				const options = ref(args.options)
				const items = ref(args.items)

				return {
					args,
					options,
					items,
				}
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="filter-custom-input"
				/>
			`,
		}
	},
}

export const ManyTables: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<div class="d-flex flex-column gap-4">
						<SyTable
							v-model:options="options1"
							:headers="headers"
							:items="items1"
							suffix="table-1"
						/>
						<SyTable
							v-model:options="options2"
							:headers="headers"
							:items="items2"
							suffix="table-2"
						/>
					</div>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options1 = ref({
						itemsPerPage: 4,
					})
					
					const options2 = ref({
						itemsPerPage: 2,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'caption': '',
		'suffix': 'multi-server',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				const options1 = ref<Partial<DataOptions>>({
					itemsPerPage: 4,
				})
				const options2 = ref<Partial<DataOptions>>({
					itemsPerPage: 2,
				})
				return { args, options1, options2 }
			},
			template: `
				<div>
					<SyTable
						v-model:options="options1"
						v-bind="args"
						suffix="table1"
						class="mb-10"
					/>
					<SyTable
						v-model:options="options2"
						v-bind="args"
						suffix="table2"
					/>
				</div>
			`,
		}
	},
}

export const DataAlignment: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="alignment-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'ID',
							key: 'id',
							align: 'center',
						},
						{
							title: 'Nom',
							key: 'lastname',
							align: 'start',
						},
						{
							title: 'Date de naissance',
							key: 'birthdate',
							align: 'center',
						},
						{
							title: 'NIR',
							key: 'nir',
							align: 'end',
						},
					])

					const items = ref([
						{
							id: '1',
							lastname: 'Lefebvre',
							birthdate: '18/02/1989',
							nir: '1 89 02 75 120 005 79',
						},
						{
							id: '2',
							lastname: 'Richard',
							birthdate: '22/05/1991',
							nir: '2 91 05 75 120 005 76',
						},
						{
							id: '3',
							lastname: 'Fournier',
							birthdate: '11/11/2000',
							nir: '2 00 11 42 120 008 87',
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'ID',
				key: 'id',
				align: 'center',
				sortable: false,
			},
			{
				title: 'Nom',
				key: 'lastname',
				align: 'start',
				sortable: false,
			},
			{
				title: 'Date de naissance',
				key: 'birthdate',
				align: 'center',
				sortable: false,
			},
			{
				title: 'NIR',
				key: 'nir',
				align: 'end',
				sortable: false,
			},
		],
		'items': [
			{
				id: '1',
				lastname: 'Lefebvre',
				birthdate: '18/02/1989',
				nir: '1 89 02 75 120 005 79',
			},
			{
				id: '2',
				lastname: 'Richard',
				birthdate: '22/05/1991',
				nir: '2 91 05 75 120 005 76',
			},
			{
				id: '3',
				lastname: 'Fournier',
				birthdate: '11/11/2000',
				nir: '2 00 11 42 120 008 87',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'suffix': 'alignment-table',
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="alignment-table"
				/>
			`,
		}
	},
}

export const ResizableColumns: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						:resizable-columns="true"
						suffix="resizable-columns"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
							title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'resizableColumns': true,
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'suffix': 'resizable-columns',
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="resizable-columns"
				/>
			`,
		}
	},
}

export const ClickableRow: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<div>
						<SyTable
							v-model:options="options"
							:headers="headers"
							:items="items"
							clickable-row
							suffix="clickable-row-table"
							@row-click="selectedRow = $event"
						/>
						<div v-if="selectedRow" class="mt-4 pa-4 bg-grey-lighten-4">
							<h3 class="text-h6 mb-3">Ligne cliquée</h3>
							<div class="pa-2 bg-grey-lighten-3">
								<div><strong>Nom:</strong> {{ selectedRow.lastname }}</div>
								<div><strong>Prénom:</strong> {{ selectedRow.firstname }}</div>
								<div><strong>Email:</strong> {{ selectedRow.email }}</div>
							</div>
						</div>
					</div>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'

					const options = ref({ itemsPerPage: 5, filters: [] })
					const selectedRow = ref(null)

					const headers = [
						{ title: 'Nom', key: 'lastname' },
						{ title: 'Prénom', key: 'firstname' },
						{ title: 'Email', key: 'email' },
					]

					const items = [
						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
						{ firstname: 'Alice', lastname: 'Dupont', email: 'alice.dupont@example.com' },
						{ firstname: 'Marc', lastname: 'Lefevre', email: 'marc.lefevre@example.com' },
					]
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{ title: 'Nom', key: 'lastname' },
			{ title: 'Prénom', key: 'firstname' },
			{ title: 'Email', key: 'email' },
		],
		'items': [
			{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
			{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
			{ firstname: 'Alice', lastname: 'Dupont', email: 'alice.dupont@example.com' },
			{ firstname: 'Marc', lastname: 'Lefevre', email: 'marc.lefevre@example.com' },
		],
		'options': { itemsPerPage: 5, filters: [] },
		'clickableRow': true,
		'suffix': 'clickable-row-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
		'onRow-click': fn(),
	},
	render: (args) => {
		return {
			components: {
				ClickableRowTableCanvas: defineComponent({
					components: { SyTable },
					emits: ['row-click'],
					setup() {
						const boundArgs = computed(() => {
							return Object.fromEntries(Object.entries(args).filter(([key]) => key !== 'onRow-click'))
						})

						return { args, boundArgs }
					},
					template: `
						<SyTable
							v-model:options="args.options"
							v-bind="boundArgs"
							@row-click="$emit('row-click', $event)"
						/>
					`,
				}),
			},
			setup() {
				const selectedRow = ref<Record<string, unknown> | null>(null)
				const handleRowClick = (item: Record<string, unknown>) => {
					selectedRow.value = item
					args['onRow-click']?.(item)
				}
				return { selectedRow, handleRowClick }
			},
			template: `
				<div>
					<ClickableRowTableCanvas @row-click="handleRowClick" />
					<div v-if="selectedRow" class="mt-4 pa-4 bg-grey-lighten-4">
						<h3 class="text-h6 mb-3">Ligne cliquée</h3>
						<div class="pa-2 bg-grey-lighten-3">
							<div><strong>Nom:</strong> {{ selectedRow.lastname }}</div>
							<div><strong>Prénom:</strong> {{ selectedRow.firstname }}</div>
							<div><strong>Email:</strong> {{ selectedRow.email }}</div>
						</div>
					</div>
				</div>
			`,
		}
	},
}
export const RowSelection: Story = {
	name: 'Row Selection',
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						v-model="selection"
						:headers="headers"
						:items="items"
						show-select
						show-filters
						suffix="selection-table"
					/>
					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : items.find(i => JSON.stringify(i) === item)?.email }}</div>
						</div>
					</div>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
							title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		headers: [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		items: [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		options: {
			itemsPerPage: 4,
		},
		caption: '',
		suffix: 'selection-table',
		density: 'default',
		striped: false,
		showSelect: true,
		showFilters: true,
	},
	render(args) {
		return {
			components: { SyTable },
			setup() {
				const items = ref(args.items)
				const selection = ref([])
				return { args, selection, items }
			},
			template: `
				<div>
					<SyTable
						v-model:options="args.options"
						v-model="selection"
						v-bind="args"
						suffix="selection-table"
					/>
					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : args.items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : args.items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : args.items.find(i => JSON.stringify(i) === item)?.email }}</div>
						</div>
					</div>
				</div>
			`,
		}
	},
}

export const SingleRowSelection: Story = {
	name: 'Single Row Selection',
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						v-model="selection"
						:headers="headers"
						:items="items"
						show-select-single
						show-filters
						suffix="selection-table"
					/>
					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : items.find(i => JSON.stringify(i) === item)?.email }}</div>
						</div>
					</div>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
							title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		headers: [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		items: [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		options: {
			itemsPerPage: 4,
		},
		caption: '',
		suffix: 'selection-table',
		density: 'default',
		striped: false,
		showSelectSingle: true,
		showFilters: true,
	},
	render(args) {
		return {
			components: { SyTable },
			setup() {
				const items = ref(args.items)
				const selection = ref([])
				return { args, selection, items }
			},
			template: `
				<div>
					<SyTable
						v-model:options="args.options"
						v-model="selection"
						v-bind="args"
						suffix="selection-table"
					/>
					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : args.items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : args.items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : args.items.find(i => JSON.stringify(i) === item)?.email }}</div>
						</div>
					</div>
				</div>
			`,
		}
	},
}

export const PinnedColumns: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<div style="max-width: 900px; overflow: auto;">
						<SyTable
							v-model:options="options"
							:headers="headers"
							:items="items"
							show-select
							sticky-select
							:pinned-columns="pinnedColumns"
							suffix="pinned-columns-table"
						/>
					</div>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					import dayjs from 'dayjs'
				
					const options = ref({ itemsPerPage: 5 })
					const headers = ref([
						{ title: 'ID', key: 'id', width: 80 },
						{ title: 'Nom', key: 'lastname', width: 160 },
						{ title: 'Prénom', key: 'firstname', width: 160 },
						{ title: 'Email', key: 'email', width: 240 },
						{ title: 'Ville', key: 'city', width: 160 },
						{ title: 'Pays', key: 'country', width: 160 },
						{ title: 'Téléphone', key: 'phone', width: 180 },
						{ title: 'Statut', key: 'status', width: 140 },
						{ title: 'Dernière connexion', key: 'lastLogin', width: 200 },
						{ title: 'Actions', key: 'actions', width: 140 },
					])
					const items = ref(Array.from({ length: 12 }).map((_, i) => ({
						id: i + 1,
						lastname: 'Nom ' + (i + 1),
						firstname: 'Prénom ' + (i + 1),
						email: 'user' + (i + 1) + '@example.com',
						city: 'Paris',
						country: 'France',
						phone: '01 02 03 04 05',
						status: i % 2 === 0 ? 'Actif' : 'Inactif',
						lastLogin: dayjs().subtract(i, 'day').format('DD/MM/YYYY'),
						actions: '…',
					})))
					const pinnedColumns = ref([
						{ key: 'actions', side: 'right' },
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{ title: 'ID', key: 'id', width: 80 },
			{ title: 'Nom', key: 'lastname', width: 160 },
			{ title: 'Prénom', key: 'firstname', width: 160 },
			{ title: 'Email', key: 'email', width: 240 },
			{ title: 'Ville', key: 'city', width: 160 },
			{ title: 'Pays', key: 'country', width: 160 },
			{ title: 'Téléphone', key: 'phone', width: 180 },
			{ title: 'Statut', key: 'status', width: 140 },
			{ title: 'Dernière connexion', key: 'lastLogin', width: 200 },
			{ title: 'Actions', key: 'actions', width: 140 },
		],
		'items': Array.from({ length: 12 }).map((_, i) => ({
			id: i + 1,
			lastname: 'Nom ' + (i + 1),
			firstname: 'Prénom ' + (i + 1),
			email: 'user' + (i + 1) + '@example.com',
			city: 'Paris',
			country: 'France',
			phone: '01 02 03 04 05',
			status: i % 2 === 0 ? 'Actif' : 'Inactif',
			lastLogin: dayjs().subtract(i, 'day').format('DD/MM/YYYY'),
			actions: '…',
		})),
		'options': {
			itemsPerPage: 5,
		},
		'suffix': 'pinned-columns-table',
		'showSelect': true,
		'stickySelect': true,
		'pinnedColumns': [
			{ key: 'actions', side: 'right' },
		],
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<div style="max-width: 900px; overflow: auto;">
					<SyTable
						v-model:options="args.options"
						v-bind="args"
						suffix="pinned-columns-table"
					/>
				</div>
			`,
		}
	},
}

export const ColumnControls: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="column-control-table"
						enable-column-controls
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'caption': '',
		'suffix': 'column-control-table',
		'density': 'default',
		'striped': false,
		'enableColumnControls': true,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				/>
			`,
		}
	},
}

export const ExpandableRows: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						show-expand
						caption="Tableau complexe"
						suffix="expand-table"
					>
                      <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
                          <v-btn
                            :append-icon="isExpanded(internalItem) ? mdiChevronUp : mdiChevronDown"
                            :text="isExpanded(internalItem) ? 'Fermer' : \`Plus d'info\`"
                            class="text-none"
                            color="medium-emphasis"
                            size="small"
                            variant="text"
                            width="105"
                            border
                            slim
                            @click="toggleExpand(internalItem)"
                          />
                      </template>
                
                      <template #expanded-row="{ columns, item }">
                        <tr>
                          <td
                            :colspan="columns.length"
                            class="py-2"
                          >
                            <strong>Informations complémentaires :</strong>
                             <p>Plus de détails pour {{ item.firstname }} {{ item.lastname }}.</p>
                          </td>
                        </tr>
                      </template>
                    </SyTable>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'caption': '',
		'showExpand': true,
		'suffix': 'expandable-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args, mdiChevronDown, mdiChevronUp }
			},
			template: `
              <SyTable
                  v-model:options="args.options"
                  v-bind="args"
                  show-expand
                  caption="Tableau complexe"
                  suffix="expand-table"
              >
                  <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
                    <v-btn
                        :append-icon="isExpanded(internalItem) ? mdiChevronUp : mdiChevronDown"
                        :text="isExpanded(internalItem) ? 'Fermer' : \`Plus d'info\`"
                        class="text-none"
                        color="medium-emphasis"
                        size="small"
                        variant="text"
                        width="105"
                        border
                        slim
                        @click="toggleExpand(internalItem)"
                    />
                  </template>

                  <template #expanded-row="{ columns, item }">
                    <tr>
                      <td
                          :colspan="columns.length"
                          class="py-2"
                      >
                        <strong>Informations complémentaires :</strong>
                        <p>Plus de détails pour {{ item.firstname }} {{ item.lastname }}.</p>
                      </td>
                    </tr>
                  </template>
              </SyTable>
            `,
		}
	},
}

export const SlotItem: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="slot-item-table"
					>
						<template #item="{ item }">
							<tr>
								<td>{{ item.lastname }}</td>
								<td>
									<a
										href="#"
										class="text-primary"
									>
										{{ item.firstname }}
									</a>
								</td>
								<td>{{ item.email }}</td>
							</tr>
						</template>
					</SyTable>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'caption': '',
		'suffix': 'slot-item-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="slot-item-table"
				>
					<template #item="{ item }">
						<tr>
							<td>{{ item.lastname }}</td>
							<td>
								<a
									href="#"
									class="text-primary"
								>
									{{ item.firstname }}
								</a>
							</td>
							<td>{{ item.email }}</td>
						</tr>
					</template>
				</SyTable>
			`,
		}
	},
}

export const SlotHeaders: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="slot-item-table"
					>
						<template #headers="{ columns }">
						  <tr>
							<th 
							  v-for="column in columns" 
							  :key="column.key"
							>
							  <span class="font-weight-bold text-primary">
								{{ column.title }}
							  </span>
							</th>
						  </tr>
						</template>
					</SyTable>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 4,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com'
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com'
						}
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 4,
		},
		'caption': '',
		'suffix': 'slot-item-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
					suffix="slot-item-table"
				>
					<template #headers="{ columns }">
						<tr>
							<th
								v-for="column in columns"
								:key="column.key"
							>
								<span class="font-weight-bold text-primary">
								{{ column.title }}
							  </span>
							</th>
						</tr>
					</template>
				</SyTable>
			`,
		}
	},
}

export const SlotHeader: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						:headers="headers"
						:items="items"
					>
						<template #header.lastname>
							<span class="text-primary font-weight-bold">
								Nom de famille
							</span>
						</template>
					</SyTable>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com',
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com',
						},
						{
                            firstname: 'Théo',
							lastname: 'Garnier',
							email: 'theo.garnier@exemple.com',
						},
						{
                            firstname: 'Clara',
							lastname: 'Moreau',
							email: 'clara.moreau@exemple.com',
						},
						{
							firstname: 'Lucas',
							lastname: 'Lefebvre',
							email: 'lucas.lefebre@exemple.com',
						},
						{
							firstname: 'Emma',
							lastname: 'Dubois',
							email: 'emma.dubois@exemple.com',
						},
						{
							firstname: 'Julien',
							lastname: 'Martin',
							email: 'julien.martin@exemple.com',
						},
						{
							firstname: 'Sophie',
							lastname: 'Bernard',
							email: 'sophie.bernard@exemple.com',
						},
						{
							firstname: 'Antoine',
							lastname: 'Lemoine',
							email: 'antoine.lemoine@exemple.com',
						},
						{
							firstname: 'Camille',
							lastname: 'Rousseau',
							email: 'camille.rousseau@exemple.com',
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
			{
				firstname: 'Théo',
				lastname: 'Garnier',
				email: 'theo.garnier@exemple.com',
			},
			{
				firstname: 'Clara',
				lastname: 'Moreau',
				email: 'clara.moreau@exemple.com',
			},
			{
				firstname: 'Lucas',
				lastname: 'Lefebvre',
				email: 'lucas.lefebre@exemple.com',
			},
			{
				firstname: 'Emma',
				lastname: 'Dubois',
				email: 'emma.dubois@exemple.com',
			},
			{
				firstname: 'Julien',
				lastname: 'Martin',
				email: 'julien.martin@exemple.com',
			},
			{
				firstname: 'Sophie',
				lastname: 'Bernard',
				email: 'sophie.bernard@exemple.com',
			},
			{
				firstname: 'Antoine',
				lastname: 'Lemoine',
				email: 'antoine.lemoine@exemple.com',
			},
			{
				firstname: 'Camille',
				lastname: 'Rousseau',
				email: 'camille.rousseau@exemple.com',
			},
		],
		'suffix': 'slot-header-table',
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				>
					<template #header.lastname>
						<span class="text-primary font-weight-bold">
							Nom de famille
						</span>
					</template>
				</SyTable>
			`,
		}
	},
}

export const ItemsPerPageOptions: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						:items-per-page-options="[5, 10, 15]"
						suffix="items-per-page-options-table"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const options = ref({
						itemsPerPage: 5,
					})
					
					const headers = ref([
						{
							title: 'Nom',
							key: 'lastname',
						},
						{
							title: 'Prénom',
							key: 'firstname',
						},
						{
                            title: 'Email',
							value: 'email',
						},
					])
						
					const items = ref([
						{
							firstname: 'Virginie',
							lastname: 'Beauchesne',
							email: 'virginie.beauchesne@example.com',
						},
						{
							firstname: 'Simone',
							lastname: 'Bellefeuille',
							email: 'simone.bellefeuille@example.com',
						},
						{
							firstname: 'Étienne',
							lastname: 'Salois',
							email: 'etienne.salois@example.com',
						},
						{
							firstname: 'Thierry',
							lastname: 'Bobu',
							email: 'thierry.bobu@example.com',
						},
						{
							firstname: 'Bernadette',
							lastname: 'Langelier',
							email: 'bernadette.langelier@exemple.com',
						},
						{
							firstname: 'Agate',
							lastname: 'Roy',
							email: 'agate.roy@exemple.com',
						},
						{
                            firstname: 'Théo',
							lastname: 'Garnier',
							email: 'theo.garnier@exemple.com',
						},
						{
                            firstname: 'Clara',
							lastname: 'Moreau',
							email: 'clara.moreau@exemple.com',
						},
						{
							firstname: 'Lucas',
							lastname: 'Lefebvre',
							email: 'lucas.lefebre@exemple.com',
						},
						{
							firstname: 'Emma',
							lastname: 'Dubois',
							email: 'emma.dubois@exemple.com',
						},
						{
							firstname: 'Julien',
							lastname: 'Martin',
							email: 'julien.martin@exemple.com',
						},
						{
							firstname: 'Sophie',
							lastname: 'Bernard',
							email: 'sophie.bernard@exemple.com',
						},
						{
							firstname: 'Antoine',
							lastname: 'Lemoine',
							email: 'antoine.lemoine@exemple.com',
						},
						{
							firstname: 'Camille',
							lastname: 'Rousseau',
							email: 'camille.rousseau@exemple.com',
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{
				title: 'Nom',
				key: 'lastname',
			},
			{
				title: 'Prénom',
				key: 'firstname',
			},
			{
				title: 'Email',
				value: 'email',
			},
		],
		'items': [
			{
				firstname: 'Virginie',
				lastname: 'Beauchesne',
				email: 'virginie.beauchesne@example.com',
			},
			{
				firstname: 'Simone',
				lastname: 'Bellefeuille',
				email: 'simone.bellefeuille@example.com',
			},
			{
				firstname: 'Étienne',
				lastname: 'Salois',
				email: 'etienne.salois@example.com',
			},
			{
				firstname: 'Thierry',
				lastname: 'Bobu',
				email: 'thierry.bobu@example.com',
			},
			{
				firstname: 'Bernadette',
				lastname: 'Langelier',
				email: 'bernadette.langelier@exemple.com',
			},
			{
				firstname: 'Agate',
				lastname: 'Roy',
				email: 'agate.roy@exemple.com',
			},
			{
				firstname: 'Théo',
				lastname: 'Garnier',
				email: 'theo.garnier@exemple.com',
			},
			{
				firstname: 'Clara',
				lastname: 'Moreau',
				email: 'clara.moreau@exemple.com',
			},
			{
				firstname: 'Lucas',
				lastname: 'Lefebvre',
				email: 'lucas.lefebre@exemple.com',
			},
			{
				firstname: 'Emma',
				lastname: 'Dubois',
				email: 'emma.dubois@exemple.com',
			},
			{
				firstname: 'Julien',
				lastname: 'Martin',
				email: 'julien.martin@exemple.com',
			},
			{
				firstname: 'Sophie',
				lastname: 'Bernard',
				email: 'sophie.bernard@exemple.com',
			},
			{
				firstname: 'Antoine',
				lastname: 'Lemoine',
				email: 'antoine.lemoine@exemple.com',
			},
			{
				firstname: 'Camille',
				lastname: 'Rousseau',
				email: 'camille.rousseau@exemple.com',
			},
		],
		'options': {
			itemsPerPage: 5,
		},
		'itemsPerPageOptions': [5, 10, 15],
		'caption': '',
		'suffix': 'default-table',
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				/>
			`,
		}
	},
}

export const ComplexItemsDisplay: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						:headers="headers"
						:items="items"
						suffix="items-per-page-options-table"
					>
						<template #[\`item.period\`]="{ item }">
							Depuis le {{ item.period.start }} jusqu'au {{ item.period.end }}
						</template>
					</SyTable>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'
					
					const headers = ref([
						{
							title: 'Titre',
							key: 'title',
						},
						{
							title: 'Période',
							key: 'period',
						},
					])
						
					const items = ref([
						{
							title: 'Projet Alpha',
							period: {
								start: '01/01/2023',
								end: '30/06/2023',
							},
						},
						{
							title: 'Projet Beta',
							period: {
								start: '15/02/2023',
								end: '15/08/2023',
							},
						},
						{
							title: 'Projet Gamma',
							period: {
								start: '01/03/2023',
								end: '31/12/2023',
							},
						},
					])
				</script>
				`,
			},
		],
	},
	args: {
		headers: [
			{
				title: 'Titre',
				key: 'title',
			},
			{
				title: 'Période',
				key: 'period',
			},
		],
		items: [
			{
				title: 'Projet Alpha',
				period: {
					start: '01/01/2023',
					end: '30/06/2023',
				},
			},
			{
				title: 'Projet Beta',
				period: {
					start: '15/02/2023',
					end: '15/08/2023',
				},
			},
			{
				title: 'Projet Gamma',
				period: {
					start: '01/03/2023',
					end: '31/12/2023',
				},
			},
		],
		caption: 'Périodes des projets en cours',
		suffix: 'items-display-cell-table',
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-bind="args"
				>
					<template #[\`item.period\`]="{ item }">
						Depuis le {{ item.period.start }} jusqu'au {{ item.period.end }}
					</template>
				</SyTable>
			`,
		}
	},
}

export const HideDefaultFooter: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="hide-footer-table"
						hide-default-footer
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'

					const options = ref({ itemsPerPage: -1 })

					const headers = ref([
						{ title: 'Nom', key: 'lastname' },
						{ title: 'Prénom', key: 'firstname' },
						{ title: 'Email', key: 'email' },
					])

					const items = ref([
						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
						{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{ title: 'Nom', key: 'lastname' },
			{ title: 'Prénom', key: 'firstname' },
			{ title: 'Email', key: 'email' },
		],
		'items': [
			{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
			{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
			{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
			{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
			{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
			{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
		],
		'options': { itemsPerPage: -1 },
		'suffix': 'hide-footer-table',
		'hideDefaultFooter': true,
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				/>
			`,
		}
	},
}

export const PageInput: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SyTable
						v-model:options="options"
						:headers="headers"
						:items="items"
						suffix="page-input-table"
						page-input
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { SyTable } from '@cnamts/synapse'

					const options = ref({ itemsPerPage: 5 })

					const headers = ref([
						{ title: 'Nom', key: 'lastname' },
						{ title: 'Prénom', key: 'firstname' },
						{ title: 'Email', key: 'email' },
					])

					const items = ref([
						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
						{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
						{ firstname: 'Théo', lastname: 'Garnier', email: 'theo.garnier@example.com' },
						{ firstname: 'Clara', lastname: 'Moreau', email: 'clara.moreau@example.com' },
						{ firstname: 'Lucas', lastname: 'Lefebvre', email: 'lucas.lefebvre@example.com' },
						{ firstname: 'Emma', lastname: 'Dubois', email: 'emma.dubois@example.com' },
						{ firstname: 'Julien', lastname: 'Martin', email: 'julien.martin@example.com' },
					])
				</script>
				`,
			},
		],
	},
	args: {
		'headers': [
			{ title: 'Nom', key: 'lastname' },
			{ title: 'Prénom', key: 'firstname' },
			{ title: 'Email', key: 'email' },
		],
		'items': [
			{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
			{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
			{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
			{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
			{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
			{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
			{ firstname: 'Théo', lastname: 'Garnier', email: 'theo.garnier@example.com' },
			{ firstname: 'Clara', lastname: 'Moreau', email: 'clara.moreau@example.com' },
			{ firstname: 'Lucas', lastname: 'Lefebvre', email: 'lucas.lefebvre@example.com' },
			{ firstname: 'Emma', lastname: 'Dubois', email: 'emma.dubois@example.com' },
			{ firstname: 'Julien', lastname: 'Martin', email: 'julien.martin@example.com' },
		],
		'options': { itemsPerPage: 5 },
		'suffix': 'page-input-table',
		'pageInput': true,
		'density': 'default',
		'striped': false,
		'onUpdate:options': fn(),
	},
	render: (args) => {
		return {
			components: { SyTable },
			setup() {
				return { args }
			},
			template: `
				<SyTable
					v-model:options="args.options"
					v-bind="args"
				/>
			`,
		}
	},
}