import {Controls, Canvas, Meta, Source} from '@storybook/blocks';

import * as NotificationBarStories from './NotificationBar.stories';

<Meta of={NotificationBarStories} />

<div className="header">
  <h1>Accessibilité du composant NotificationBar </h1>
  <p>Le composant `NotificationBar` est un wrapper autour du composant `v-icon` de Vuetify qui ajoute une gestion automatique de l'accessibilité selon les normes RGAA.</p>
</div>

##### Les NotificationsBar servent à notifier l’utilisateur soit d’un retour d’action.

##### Deux actions sont possibles :
 - Fermer la notification lorsqu’elle a été vue
 - Cliquer sur un élément qui permet de faire une action secondaire (comme amener sur une page visée par la notification).

##### L’affichage d’une durée de quelques secondes et disparition automatique de la notification bar est déconseillé pour des raisons d’accessibilité afin de permettre à tout le monde de prendre le temps nécessaire de lire la notification.

##### Les 4 états son disponibles :
- **Information** : Information supplémentaire nécessaire à la compréhension de l’utilisateur d’un élément spécifique.
- **Error** : une erreur est survenue, technique ou lié à l’action que l’utilisateur à réalisé
- **Warning** : Alerte, élément important mais pas bloquant. L’utilisateur a besoin d’être informé d’un élément ou d’une conséquence.
- **Success** : l’action a été réalisée correctement et prise en compte.

<Canvas of={NotificationBarStories.Default}  />

# API
<Controls of={NotificationBarStories.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
	import { VBtn } from 'vuetify/components'
	import { NotificationBar } from '@cnamts/synapse'
	import { useNotificationService } from '@cnamts/synapse'
	import type { Notification } from '@cnamts/synapse'

	const { addNotification } = useNotificationService()
    import '../../stories/styles/shared.css';

	const envoyerNotification = (message: string, type: Notification['type']) => {
		const notification: Notification = {
			id: Date.now().toString(),
			message,
			type,
			timeout: -1,
		}
		addNotification(notification)
	}
</script>

<template>
	<div>
		<NotificationBar
			bottom
			rounded="lg"
		>
			<template #action>
				<VBtn variant="outlined">
					Valider
				</VBtn>
			</template>
		</NotificationBar>

		<div class="button-group">
			<VBtn
				color="info"
				@click="envoyerNotification('Première notification', 'info')"
			>
				Envoyer Notification 1
			</VBtn>
			<VBtn
				color="success"
				@click="envoyerNotification('Deuxième notification', 'success')"
			>
				Envoyer Notification 2
			</VBtn>
			<VBtn
				color="error"
				@click="envoyerNotification('Troisième notification', 'error')"
			>
				Envoyer Notification 3
			</VBtn>
		</div>
	</div>
</template>

<style scoped>
    .button-group {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 20px;
    }
</style>
`} />