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

<Meta of={FilterInlineStories} />

<div className="header">
  <h1>FilterInline</h1>

</div><Canvas of={FilterInlineStories.Default} />

# API

<Controls of={FilterInlineStories.Default} />

# Examples

## Formatage des puces

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

<Canvas
	of={FilterInlineStories.ChipFormat}
		source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { FilterInline, 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>
			<FiltersInline v-model="filters">
				<template #range-slider="{ props }">
					<RangeField
						v-bind="props"
						label="Intervalle"
						max="50"
						min="0"
					/>
				</template>
			</FiltersInline>
		</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={FilterInlineStories.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>
		`
	}}
/>