import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
import * as PasswordFieldStories from './PasswordField.stories'

<Meta of={PasswordFieldStories} />

<div className="header">
  <h1>PasswordField</h1>
  <p>Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.</p>
</div>

## Utilisation basique

La version de base du composant avec le style outlined par défaut.

<Canvas of={PasswordFieldStories.Default} />

## Fonctionnalités principales

- **Masquage/affichage du mot de passe** : Une icône permet de basculer entre l'affichage en clair et masqué
- **Validation personnalisable** : Support des messages d'erreur, d'avertissement et de succès
- **Styles configurables** : Choix entre les styles `outlined` et `underlined`
- **États spéciaux** : Support des états désactivé et lecture seule
- **Validation automatique** : Validation à la perte de focus configurable

## API

<Controls of={PasswordFieldStories.Default} />

<Source
    dark code={`
<template>
	<PasswordField
		v-model="password"
		label="Mot de passe"
	/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')
</script>
`}
/>

## Validation

### Validation simple

Le composant peut être requis et afficher un message d'erreur si le champ est vide.

<Canvas of={PasswordFieldStories.Required} />

### Validation avancée

Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).

<Canvas of={PasswordFieldStories.WithValidation} />

### Exemples d'états de validation

<div className="sb-grid">
  <div>
    <h4>Avec erreur</h4>
    <Canvas of={PasswordFieldStories.WithError} />
  </div>
  <div>
    <h4>Avec avertissement</h4>
    <Canvas of={PasswordFieldStories.WithWarning} />
  </div>
  <div>
    <h4>Avec succès</h4>
    <Canvas of={PasswordFieldStories.WithSuccess} />
  </div>
</div>

### Validation de formulaire

Le composant expose une méthode `validateOnSubmit` pour valider le champ lors de la soumission d'un formulaire.

<Canvas of={PasswordFieldStories.WithFormValidation} />

<Source
    dark code={`
<template>
	<form @submit.prevent="handleSubmit">
		<PasswordField
			ref="passwordFieldRef"
			v-model="password"
			required
			:custom-rules="customRules"
		/>
		<button type="submit">Valider</button>
	</form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')
import '../../stories/styles/shared.css';
const passwordFieldRef = ref()

const customRules = [{
	type: 'custom',
	options: {
		message: 'Le mot de passe doit contenir au moins 8 caractères',
		validate: (value: string) => value.length >= 8
	}
}]

function handleSubmit() {
	const isValid = passwordFieldRef.value?.validateOnSubmit()
	if (!isValid) {
		// Gérer l'erreur
		return
	}
	// Continuer avec la soumission
}
</script>
`}
/>

### Méthodes exposées

Le composant expose les méthodes et propriétés suivantes via `defineExpose` :

- **showEyeIcon** : (ref) Contrôle l'affichage du mot de passe
- **errors** : (ref) Liste des erreurs de validation actuelles
- **warnings** : (ref) Liste des avertissements actuels
- **successes** : (ref) Liste des messages de succès actuels
- **validateOnSubmit** : () => boolean - Méthode pour valider le champ, retourne true si valide

## Bonnes pratiques

1. **Validation progressive** :
   - Utilisez `isValidateOnBlur` pour une validation en temps réel
   - Combinez erreurs, avertissements et succès pour guider l'utilisateur

2. **Messages clairs** :
   - Utilisez des messages d'erreur explicites
   - Fournissez des suggestions d'amélioration via les warnings
   - Confirmez les bonnes pratiques avec les messages de succès

3. **Accessibilité** :
   - Toujours fournir un label explicite
   - Utiliser la prop `required` quand nécessaire
   - Considérer l'utilisation de `displayAsterisk` pour les champs requis

## En savoir plus

Pour plus d'informations sur l'utilisation des règles de validation, consultez la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).

<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>