import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
import '../../stories/styles/shared.css';

import * as DownloadBtnStories from './DownloadBtn.stories';

<Meta of={DownloadBtnStories} />

<div className="header">
  <h1>DownloadBtn</h1>
  <p>L'élément `DownloadBtn` est utilisé pour permettre à l'utilisateur de télécharger un document provenant d'une API.</p>
</div>

<Canvas of={DownloadBtnStories.Default} />

# API

<Controls of={DownloadBtnStories.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
	import { DownloadBtn } from '@cnamts/synapse'
	import axios from 'axios'

	function download() {
		return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
	}
</script>

<template>
	<div>
		<DownloadBtn
			:file-promise="download"
			:btn="{ color: 'primary'}"
			@error="console.error"
			@success="console.info"
		>
			Download
		</DownloadBtn>
	</div>
</template>
`} />

# Notifier l'utilisateur

Vous pouvez utiliser les événements `success` et `error` pour notifier l'utilisateur du succès ou de l'échec du téléchargement.
Ici avec le composant `NotificationBar` du design system.

<Canvas of={DownloadBtnStories.Notify} sourceState="none"/>

Exemple :

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

	function download()
{
		return axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f')
	}

	const { addNotification } = useNotificationService()

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

</script>

<template>
	<VApp>
		<NotificationBar />
		<div class="d-flex">
			<DownloadBtn
				:file-promise="download"
				:btn="{ color: 'primary'}"
				@error="console.error"
				@success="notify('Votre attestation a été téléchargée', 'success')"
			>
				Download
			</DownloadBtn>
		</div>
	</VApp>
</template>
`} />