import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
import * as CookieBannerStories from './CookieBanner.stories';

<Meta of={CookieBannerStories} />

<div className="header">
  <h1>CookieBanner</h1>
  <p>Le composant `CookieBanner` est utilisé pour afficher une bannière de consentement pour les cookies.</p>
</div>

<Canvas of={CookieBannerStories.Default} />

# API

<Controls of={CookieBannerStories.Default} />

## Personnalisation des cookies

La props `items` permette de transmettre les cookies organisés en trois categories :
 - Les cookies essentiels au fonctionnement du site (essentials)
 - Les cookies sur lesquels reposent des fonctionnalités optionnelles (functional)
 - Les cookies de mesure d'analyse d'audience (analytics)

L'utilisateur peut choisir d'accepter ou de refuser les cookies de chaque catégorie à l’exception des cookies essentiels pour le fonctionnement du site.

Si la props `items` n'est pas renseigné, le menu de selection des categories de cookies ne sera pas affiché.
Si une catégorie n'est pas définie, elle n’apparaîtra pas dans le composant.
Si l'utilisateur choisi de personnaliser ses cookies un évènement `subit` sera émit avec les catégories de cookies acceptés par l'utilisateur. Les cookies non essentiels doivent être chargés après l'événement `submit` pour respecter le RGPD.

## Sans selection des cookies

Vous pouvez omettre la props `items`, dans ce cas la l'interface de sélection des categories de cookies ne sera pas affichée.
Vous pourrez toujours afficher utiliser l’événement `customize` pour afficher une interface de sélection des cookies personnalisée.

<Canvas
	of={CookieBannerStories.WithoutCookiesItems}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { CookieBanner } from '@cnamts/synapse'

			const openBanner = ref(true)
		</script>

		<template>
			<CookieBanner
				v-model="openBanner"
				@customize="openDialog = true"
			/>
		</template>
		`
	}}
/>

## Description de la bannière

Vous pouvez personnaliser le texte de la bannière en utilisant le slot par défaut

<Canvas
	of={CookieBannerStories.BannerDescriptionSlot}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { CookieBanner } from '@cnamts/synapse'

			const openBanner = ref(true)
		</script>

		<template>
			<CookieBanner
				v-model="openBanner"
				@customize="openDialog = true"
			>
				<p><b>Custom</b> description</p>
			</CookieBanner>
		</template>
		`
	}}
/>

## Description du cookies avancée

Pour mettre d'avantage que du text brut en description d'un cookie (Liens...), il est possible de passer par un slot.
Le nom du slot aura pour format `cookie-description-<cookie-name>`.

Une propriété `cookie` est passée au slot contenant les informations du cookie.

<Canvas
	of={CookieBannerStories.CookiesDescriptionSlots}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { CookieBanner } from '@cnamts/synapse'

			const openBanner = ref(true)

			const items = {
				"functional": [
					{
						name: 'contrast',
						conservation: '1 an',
					},
					{
						name: 'privacy',
						conservation: '1 an',
					},
					{
						name: 'cookie_policy',
						description: 'Sauvegarde les préférences de cookies.',
						conservation: '1 an',
					},
				]
			};
		</script>

		<template>
			<CookieBanner
				v-model="openBanner"
				:items="items"
			>
				<template #cookie-description-contrast="{ cookie }">
					voir : <a href="#">En savoir plus</a>
				</template>
				<template #cookie-description-privacy="{ cookie }">
					<a href="#">Politique de confidentialité</a>
				</template>
			</CookieBanner>
		</template>
		`
	}}
/>

## Personnalisation des composants Vuetify

Vous pouvez personnaliser les composants Vuetify utilisés par le composant `CookieBanner` en utilisant la props `vuetifyOptions`.

<Canvas
	of={CookieBannerStories.Customization}
	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { CookieBanner } from '@cnamts/synapse'

			const openBanner = ref(true)
import '../../stories/styles/shared.css';

			const items = {
				essentials: [
					{
						name: 'session',
						description: 'Sauvegarde la session pour rester connecté.',
						conservation: '20 heures',
					},
					{
						name: 'cookie_policy',
						description: 'Sauvegarde les préférences de cookies.',
						conservation: '1 an',
					},
				],
				functional: [
					{
						name: 'contrast',
						description: 'Sauvegarde la personnalisation de l’affichage.',
						conservation: '1 an',
					},
				],
				analytics: [
					{
						name: 'user_id',
						description: 'Sauvegarde l’identifiant unique de visiteur.',
						conservation: '6 mois',
					},
				],
			}

			const options = {
				banner: {
					color: '#ced9eb',
				},
				customizeBtn: {
					variant: 'text',
					color: 'orange',
				},
				rejectBtn: {
					variant: 'outlined',
				},
				acceptBtn: {
					variant: 'outlined',
				},
			}

			function onSubmit(e) {
				console.log('Les cookies suivants ont été sélectionnés :', e)
				alert('Vos préférences ont été enregistrées.')

				// Charger les cookies non essentiels
			}
		</script>

		<template>
			<CookieBanner
				v-model="openBanner"
				:vuetifyOptions="options"
			/>
		</template>
		`
	}}
/>