import { Controls, Canvas, Meta, Source, Description } from '@storybook/blocks';
import * as FilterSideBarStories from './FilterSideBar.stories.ts';

<Meta of={FilterSideBarStories} />

<div className="header">
  <h1>FilterSideBar</h1>
  <p>Le composant `FilterSideBar` est utilisé pour permettre à l’utilisateur de sélectionner des filtres dans un panel dédié.</p>
</div>

<Canvas of={FilterSideBarStories.Default} />

# API

<Controls of={FilterSideBarStories.Default} />

# Exemples

## Formatage des puces

Vous pouvez modifier le formatage des puces en utilisant la propriété de filtre `chipFormat`.

<Canvas
	of={FilterSideBarStories.ChipFormat}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { FilterSideBar, RangeField } from '@cnamts/synapse'
			import { VSelect } from 'vuetify/components'

			const filters = [
				{
					name: 'range-slider',
					title: 'Intervalle',
					formatChip: ([min, max]: [number, number]) => [
						{
							text: \`De \${min} à \${max}\`,
							value: [min, max],
						},
					],
				},
			]
		</script>

		<template>
			<FilterSideBar v-model="filters">
				<template #range-slider="{ props }">
					<RangeField
						v-bind="props"
						label="Intervalle"
						max="50"
						min="0"
					/>
				</template>
			</FilterSideBar>
		</template>
		`
	}}
/>

## Combinaison de composants filtres

Vous pouvez utiliser plusieurs composants de filtres pour un seul et même filtre afin de pouvoir modifier un filtre à différents endroits sur une page.

<Canvas
	of={FilterSideBarStories.FilterCombination}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
<script lang="ts" setup>
import { ref } from 'vue'
import { FilterSideBar, filterInline, SearchListField, PeriodField } from '@cnamts/synapse'
import { VDivider, VSelect, VTextField } from 'vuetify/components'

const filters = ref([
	{
		name: 'name',
		title: 'Identité',
	},
	{
		name: 'folder',
		title: 'Type de dossier',
	},
	{
		name: 'period',
		title: 'Période',
	},
	{
		name: 'profession',
		title: 'Profession',
	},
])
import '../../stories/styles/shared.css';

const folderTypes = [
	{
		title: 'AT',
		value: 'at',
	},
	{
		title: 'MP',
		value: 'mp',
	},
	{
		title: 'Autre',
		value: 'other',
	},
]

const professionList = [
	{
		label: 'Chirurgien-dentiste',
		value: 'chirurgien-dentiste',
	},
	{
		label: 'Infirmier',
		value: 'infirmier',
	},
	{
		label: 'Orthophoniste',
		value: 'orthophoniste',
	},
	{
		label: 'Orthoptiste',
		value: 'orthoptiste',
	},
	{
		label: 'Pédicure-podologue',
		value: 'pedicure-podologue',
	},
	{
		label: 'Pharmacien',
		value: 'pharmacien',
	},
]
	
</script>

<template>
	<div>
		<FilterSideBar
			v-model="filters"
		>
			<template #name="{ props }">
				<VTextField
					v-bind="props"
					label="Nom"
					variant="outlined"
					hide-details
					color="primary"
				/>
			</template>

			<template #folder="{ props }">
				<p class="text-secondary mb-4">
					Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
				</p>

				<VSelect
					v-bind="props"
					:items="folderTypes"
					label="Type de dossier"
					multiple
					variant="outlined"
					return-object
					hide-details
					color="primary"
				/>
			</template>

			<template #period="{ props }">
				<PeriodField
					v-bind="props"
					variant="outlined"
				/>
			</template>

			<template #profession="{ props }">
				<SearchListField
					v-bind="props"
					:items="professionList"
				/>
			</template>
		</FilterSideBar>
		<VDivider class="my-4" />
		<FilterInline
			v-model="filters"
		>
			<template #name="{ props }">
				<VTextField
					v-bind="props"
					label="Nom"
					variant="outlined"
					hide-details
					color="primary"
				/>
			</template>

			<template #folder="{ props }">
				<p class="text-secondary mb-4">
					Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
				</p>

				<VSelect
					v-bind="props"
					:items="folderTypes"
					label="Type de dossier"
					multiple
					variant="outlined"
					return-object
					hide-details
					color="primary"
				/>
			</template>

			<template #period="{ props }">
				<PeriodField
					v-bind="props"
					variant="outlined"
				/>
			</template>

			<template #profession="{ props }">
				<SearchListField
					v-bind="props"
					:items="professionList"
					color="primary"
				/>
			</template>
		</FilterInline>
	</div>
</template>
		`
	}}
/>

## Gestion du z-index

Le `FilterSideBar` utilise un `VNavigationDrawer` de Vuetify dont le z-index par défaut est **1000**.

Dans la plupart des cas cette valeur convient. Deux situations particulières nécessitent de la surcharger via la prop `zIndex` :

<table>
  <thead>
    <tr>
      <th>Situation</th>
      <th>Valeur recommandée</th>
      <th>Exemple</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Le FilterSideBar s'affiche <strong>dans</strong> une modale ou une bottom sheet et doit rester visible</td>
      <td>z-index de la modale + 1 (ex. <code>2401</code>)</td>
      <td>Filtres dans un <code>VDialog</code> (z-index 2400)</td>
    </tr>
    <tr>
      <td>Une modale de confirmation doit s'afficher <strong>par-dessus</strong> un FilterSideBar ouvert</td>
      <td>Laisser le FilterSideBar à <code>1000</code> (défaut) et laisser la modale à <code>2400</code></td>
      <td>Dialog de confirmation sur une page avec FilterSideBar</td>
    </tr>
  </tbody>
</table>

> **Préconisation** : ne surchargez `zIndex` que lorsque c'est strictement nécessaire. Une valeur arbitraire élevée (ex. `9999`) peut masquer des composants systèmes (tooltips, snackbars) et crée des effets de bord difficiles à diagnostiquer.

<Description of={FilterSideBarStories.ZIndex} />

<Canvas of={FilterSideBarStories.ZIndex} />

<Source dark code={`
<FilterSideBar
  v-model="filters"
  :z-index="2401"
>
  <!-- filtres -->
</FilterSideBar>
`} />