import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
import '../../stories/styles/shared.css';

import * as TableToolbarStories from './TableToolbar.stories';

<Meta of={TableToolbarStories} />

<div className="header">
  <h1>TableToolbar</h1>
  <p>Le composant `TableToolbar` est utilisé pour afficher une barre d'outils pour les tableaux.</p>
</div>

<Canvas of={TableToolbarStories.Default}  />

# API

<Controls of={TableToolbarStories.Default} />

# Exemples

## Bouton `Ajouter`

Vous pouvez afficher un bouton permettant une action d’ajout en utilisant la prop `show-add-button`.

<Canvas of={TableToolbarStories.AddButton} />

## Nombre de lignes filtrées

Vous pouvez afficher le nombre de lignes filtrées par rapport au nombre total en utilisant la prop `nb-filtered`.

<Canvas of={TableToolbarStories.NbFiltered} />

## Mode chargement

Vous pouvez afficher le composant en mode chargement en utilisant la prop `loading`, cela va désactiver les éléments interactifs.

<Canvas of={TableToolbarStories.Loading} />

## Textes par défaut

Vous pouvez personnaliser les différents labels en utilisant les props `addButtonLabel` et `searchLabel`.

<Canvas of={TableToolbarStories.Labels} />

## Slots

Vous pouvez utiliser le slot `filters` pour ajouter des filtres à gauche du champ de recherche.

<Canvas
    of={TableToolbarStories.SlotFilters}
    source={{
        language: 'html',
        format: 'dedent',
        code: `
		<script setup lang="ts">
			import { TableToolbar, SySelect } from '@cnamts/synapse'
			import { VDataTable } from 'vuetify/components'
			import { ref } from 'vue'

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

                        const items = [
                            {
                                firstname: 'Virginie',
                                lastname: 'Beauchesne',
                                email: 'virginie.beauchesne@example.com',
                            },
                            {
                                firstname: 'Étienne',
                                lastname: 'Salois',
                                email: 'etienne.salois@example.com',
                            },
                        ]

                        const search = ref('')

                        const filterItems = ref<{ text: string, value: string }[]>([])

                            items.forEach((item) => {
                                filterItems.value.push({
                                    text: item.lastname,
                                    value: item.lastname,
                                })
                            })
                    </script>

                    <template>
                        <VDataTable
						:headers="headers"
						:items="items"
						:search="search"
						hide-default-footer
					>
						<template #top>
							<TableToolbar
								v-model:search="search"
								:nb-total="items.length"
							>
								<template #filters>
									<div class="py-4">
										<SySelect
											v-model="search"
											:items="filterItems"
											label="Nom"
											density="compact"
											hide-messages
											clearable
										/>
									</div>
								</template>
							</TableToolbar>
						</template>
					</VDataTable>
                </template>
		`
	}}
/>

Vous pouvez utiliser les slots `search-left` ou `search-right` pour ajouter du contenu à gauche ou à droite du champ de recherche.

<Canvas
	of={TableToolbarStories.OtherSlots}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script setup lang="ts">
			import { TableToolbar } from '@cnamts/synapse'
			import { VDataTable } from 'vuetify/components'
			import { ref } from 'vue'

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

			const items = [
				{
					firstname: 'Virginie',
					lastname: 'Beauchesne',
					email: 'virginie.beauchesne@example.com',
				},
				{
					firstname: 'Étienne',
					lastname: 'Salois',
					email: 'etienne.salois@example.com',
				},
			]

			const vuetifyOptions = {
				toolbar: {
					class: 'py-2',
				},
				textField: {
					variant: 'outlined',
					density: 'compact',
				},
				addBtn: {
					height: '40px',
					color: '#663399',
				},
				addIcon: {
					class: 'd-none',
				},
			}

			const search = ref('')
import '../../stories/styles/shared.css';
		</script>

		<template>
			<VDataTable
				:headers="headers"
				:items="items"
				hide-default-footer
			>
				<template #top>
					<TableToolbar
						v-model="search"
						:nb-total="10"
						show-add-button
						:vuetifyOptions
					/>
				</template>
			</VDataTable>
		</template>
		`
	}}
/>

## Personnalisation

Vous pouvez personnaliser les composants Vuetify utilisés par ce composant en utilisant la prop vuetify-options.

<Canvas of={TableToolbarStories.Customization} />