import { Meta, Source } from '@storybook/addon-docs/blocks';
import '../styles/shared.css';

<Meta title="Guide Du Dev/Services/useNotificationService" />


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

`useNotificationService` est un service Vue qui permet de gérer une file d'attente de notifications. Il fournit des méthodes pour ajouter, supprimer et effacer des notifications dans la file d'attente. Ce service est conçu pour être utilisé avec des composants de notification dans une application Vue.js.

## Importation et utilisation

<Source dark code={`
import { useNotificationService } from '@cnamts/synapse/modules/notification'

const { notificationQueue, addNotification, removeNotification, clearQueue } = useNotificationService()
`} />

> L'entrée `@cnamts/synapse/modules/notification` est déclarée explicitement dans les exports du package.

## Propriétés et méthodes :

<Source dark code={`
notificationQueue: Ref<Notification[]>
`} />

Une référence réactive à la file d'attente des notifications. Elle contient un tableau d'objets de type Notification.

<Source dark code={`
addNotification(notification: Notification): void
`} />

Ajoute une nouvelle notification à la file d'attente, à condition qu'une notification avec le même id ne soit pas déjà présente.

<Source dark code={`
addNotification({
  id: 'notif-1',
  message: 'Notification 1',
  type: 'info',
  duration: 5000
})
`} />

<Source dark code={`
removeNotification(id: string): void
`} />
Supprime une notification de la file d'attente en fonction de son id.

<Source dark code={`
removeNotification('notif-1')
`} />

<Source dark code={`
clearQueue(): void
`} />

Efface toutes les notifications de la file d'attente.

<Source dark code={`
clearQueue()
`} />

## Typage de Notification

Le type Notification est défini comme suit :

<Source dark code={`
type Notification = {
  id: string
  message: string
  type: 'success' | 'error' | 'info' | 'warning'
  duration?: number
}
`} />

Propriétés de Notification

<Source dark code={`
    id: string — Identifiant unique de la notification.
    message: string — Le texte à afficher dans la notification.
    type: 'success' | 'error' | 'info' | 'warning' — Le type de la notification, qui peut influencer son apparence.
    duration?: number — Durée pendant laquelle la notification sera visible (en millisecondes).
`} />

## Exemples d'utilisation

Ajouter une notification

<Source dark code={`
const { addNotification } = useNotificationService()

addNotification({
  id: 'notif-2',
  message: 'Votre téléchargement est terminé',
  type: 'success',
  duration: 3000
})
`} />

Supprimer une notification

<Source dark code={`
const { removeNotification } = useNotificationService()

removeNotification('notif-2')
`} />

Effacer la file d'attente de notifications

<Source dark code={`
const { clearQueue } = useNotificationService()

clearQueue()
`} />

Accéder à la file d'attente

<Source dark code={`
const { notificationQueue } = useNotificationService()

console.log(notificationQueue.value) // Affiche toutes les notifications présentes dans la file d'attente
`} />

Utilisation dans un composant Vue

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

	const { addNotification } = useNotificationService()

	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>
`} />