import type { Meta, StoryObj } from '@storybook/vue3'
import { ref } from 'vue'
import { VBtn } from 'vuetify/components'
import PasswordField from '../PasswordField.vue'
import type { PasswordFieldProps } from '../types'
import { fn, userEvent, within } from '@storybook/test'
import SyForm from '@/components/Customs/SyForm/SyForm.vue'
import { VForm } from 'vuetify/components/VForm'
import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'

type PasswordFieldStoryArgs = PasswordFieldProps & {
	'onUpdate:modelValue': (...args: unknown[]) => unknown
	'onSubmit': (...args: unknown[]) => unknown
}

const meta = {
	title: 'Composants/Formulaires/PasswordField/Validation',
	component: PasswordField,
	decorators: [
		() => ({
			template: '<div style="padding: 20px;"><story/></div>',
		}),
	],
	parameters: {
		layout: 'fullscreen',
		controls: { exclude: 'on*' },
		docs: {
			description: {
				component: `PasswordField est un champ de saisie sécurisé pour les mots de passe`,
			},
		},
	},
	argTypes: {
		...getValidationDocumentation('string'),
		'modelValue': {
			control: 'text',
			description: 'Valeur du champ de mot de passe',
		},
		'variantStyle': {
			control: 'select',
			options: ['outlined', 'underlined'],
			description: 'Style du champ (contour ou souligné)',
		},
		'color': {
			control: 'select',
			options: ['primary', 'secondary', 'error', 'warning', 'success', 'info'],
			description: 'Couleur principale du champ',
		},
		'label': {
			control: 'text',
			description: 'Libellé du champ',
		},
		'displayAsterisk': {
			control: 'boolean',
			description: 'Affiche un astérisque à côté du libellé pour indiquer que le champ est obligatoire',
		},
		'bgColor': {
			control: 'color',
			description: 'Couleur de fond du champ',
		},
		'clearable': {
			control: 'boolean',
			description: 'Affiche un bouton pour vider le champ',
		},
		'autocompleteType': {
			control: 'select',
			options: ['current-password', 'new-password'],
			description: 'Type d\'auto-complétion',
			default: 'current-password',
		},
		'helpText': {
			control: 'text',
			description: 'Texte d\'aide affiché sous le champ',
		},
		'hideDetails': {
			control: 'boolean',
			description: 'Masque la zone de détails (messages d\'erreur, d\'aide…) sous le champ',
		},
		'update:modelValue': {
			action: 'update:modelValue',
			description: 'Événement émis lors de la mise à jour de la valeur du champ',
		},
	},
	args: {
		'modelValue': '',
		'variantStyle': 'outlined',
		'color': 'primary',
		'label': 'Mot de passe',
		'required': false,
		'errorMessages': null,
		'warningMessages': null,
		'successMessages': null,
		'readonly': false,
		'disabled': false,
		'placeholder': 'Entrez votre mot de passe',
		'customRules': [],
		'customWarningRules': [],
		'customSuccessRules': [],
		'showSuccessMessages': false,
		'displayAsterisk': false,
		'isValidateOnBlur': true,
		'bgColor': 'white',
		'onUpdate:modelValue': fn(),
		'onSubmit': fn(),
	},
} as Meta<PasswordFieldStoryArgs>

export default meta

type Story = StoryObj<PasswordFieldStoryArgs>

export const WithError: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PasswordField
						v-model="password"
						label="Mot de passe"
						:custom-rules="customRules"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PasswordField } from '@cnamts/synapse'
					
					const password = ref('Mdp123')
					
					const customRules = [
						{
							type: 'custom',
							options: {
								validate: (value: string) => {
									if (!value || value.length < 8) {
										return 'Le mot de passe doit contenir au moins 8 caractères'
									}
									return true
								},
								fieldIdentifier: 'password',
							},
						},
					]
				</script>
				`,
			},
		],
	},
	args: {
		modelValue: 'Mdp123',
		customRules: [
			{
				type: 'custom',
				options: {
					validate: (value: string) => {
						if (!value || value.length < 8) {
							return 'Le mot de passe doit contenir au moins 8 caractères'
						}
						return true
					},
					fieldIdentifier: 'password',
				},
			},
		],
	},
	play: async ({ canvasElement }) => {
		const input = within(canvasElement).getByLabelText('Mot de passe')
		await userEvent.clear(input)
		await userEvent.type(input, 'Mdp123')
		input.blur()
	},
}

export const WithWarning: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PasswordField
						v-model="password"
						label="Mot de passe"
						:custom-warning-rules="customWarningRules"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PasswordField } from '@cnamts/synapse'
					
					const password = ref('MotDePasse123')
					
					const customWarningRules = [
						{
							type: 'custom',
							options: {
								validate: (value: string) => {
									const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
									if (!hasSpecialChar) {
										return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
									}
									return true
								},
								fieldIdentifier: 'password',
							},
						},
					]
				</script>
				`,
			},
		],
	},
	args: {
		modelValue: 'MotDePasse123',
		customWarningRules: [
			{
				type: 'custom',
				options: {
					validate: (value: string) => {
						const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
						if (!hasSpecialChar) {
							return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
						}
						return true
					},
					fieldIdentifier: 'password',
				},
			},
		],
	},
	play: async ({ canvasElement }) => {
		const input = within(canvasElement).getByLabelText('Mot de passe')
		await userEvent.clear(input)
		await userEvent.type(input, 'MotDePasse123')
		input.blur()
	},
}

export const WithSuccess: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PasswordField
						v-model="password"
						label="Mot de passe"
						:custom-success-rules="customSuccessRules"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PasswordField } from '@cnamts/synapse'
					
					const password = ref('MotDePasse123!@#')
					
					const customSuccessRules = [
						{
							type: 'custom',
							options: {
								validate: (value: string) => {
									const hasUpperCase = /[A-Z]/.test(value)
									const hasLowerCase = /[a-z]/.test(value)
									const hasNumber = /[0-9]/.test(value)
									const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
									const hasMinLength = value.length >= 8
									
									if (hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar && hasMinLength) {
										return 'Mot de passe fort'
									}
									return true
								},
								fieldIdentifier: 'password',
							},
						},
					]
				</script>
				`,
			},
		],
	},
	args: {
		modelValue: 'MotDePasse123!@#',
		showSuccessMessages: true,
		customSuccessRules: [
			{
				type: 'custom',
				options: {
					validate: (value: string) => {
						const hasUpperCase = /[A-Z]/.test(value)
						const hasLowerCase = /[a-z]/.test(value)
						const hasNumber = /[0-9]/.test(value)
						const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
						const isLongEnough = value.length >= 8

						if (hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar && isLongEnough) {
							return true
						}
						return false
					},
					successMessage: 'Mot de passe fort',
				},
			},
		],
	},
	play: async ({ canvasElement }) => {
		const input = within(canvasElement).getByLabelText('Mot de passe')
		await userEvent.clear(input)
		await userEvent.type(input, 'MotDePasse123!@#')
		input.blur()
	},
}

export const WithCustomRules: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PasswordField
						v-model="password"
						label="Mot de passe"
						required
						:custom-rules="customRules"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PasswordField } from '@cnamts/synapse'
					
					const password = ref('')
					
					// Règles personnalisées pour la validation du mot de passe
					const customRules = [
						{
							type: 'custom',
							options: {
								validate: (value: string) => {
									if (!value || value.length < 8) {
										return 'Le mot de passe doit contenir au moins 8 caractères'
									}
									return true
								},
								fieldIdentifier: 'password',
							},
						},
						{
							type: 'custom',
							options: {
								validate: (value) => {
									if (!value || !/[A-Z]/.test(value)) {
										return 'Le mot de passe doit contenir au moins une lettre majuscule'
									}
									return true
								},
								fieldIdentifier: 'password',
							},
						},
						{
							type: 'custom',
							options: {
								validate: (value) => {
									if (!value || !/[0-9]/.test(value)) {
										return 'Le mot de passe doit contenir au moins un chiffre'
									}
									return true
								},
								fieldIdentifier: 'password',
							},
						},
					]
				</script>
				`,
			},
		],
	},
	render: args => ({
		components: { PasswordField },
		setup() {
			const password = ref(args.modelValue ?? '')

			// Règles personnalisées pour la validation du mot de passe
			const customRules = [
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							if (!value || value.length < 8) {
								return 'Le mot de passe doit contenir au moins 8 caractères'
							}
							return true
						},
						fieldIdentifier: 'password',
					},
				},
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							if (!value || !/[A-Z]/.test(value)) {
								return 'Le mot de passe doit contenir au moins une lettre majuscule'
							}
							return true
						},
						fieldIdentifier: 'password',
						successMessage: 'Le mot de passe est sécurisé',
					},
				},
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							if (!value || !/[0-9]/.test(value)) {
								return 'Le mot de passe doit contenir au moins un chiffre'
							}
							return true
						},
						fieldIdentifier: 'password',
					},
				},
			]

			return { args, password, customRules }
		},
		template: `
			<PasswordField
				v-bind="args"
				v-model="password"
				:custom-rules="customRules"
			/>
		`,
	}),
	args: {
		required: true,
	},
}

export const WithSuccessMessages: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		docs: {
			description: {
				story: `
### Messages de succès

Cette story illustre l'utilisation de la propriété \`showSuccessMessages\` qui permet de contrôler
l'affichage des messages de succès lors de la validation. Par défaut, cette propriété est à \`false\`.

Cela peut être utile pour réduire la verbosité de l'interface lorsque les messages de succès
ne sont pas nécessaires dans certains contextes.
`,
			},
		},
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
  <!-- Champ avec messages de succès (par défaut) -->
  <PasswordField
    v-model="value1"
    label="Mot de passe avec messages de succès"
    required
  />

  <!-- Champ sans messages de succès -->
  <PasswordField
    v-model="value2"
    label="Mot de passe sans messages de succès"
    required
    :showSuccessMessages="false"
  />
</template>`,
			},
		],
	},
	render: () => ({
		components: { PasswordField },
		setup() {
			const value1 = ref('P@ssw0rd123')
			const value2 = ref('P@ssw0rd123')

			return { value1, value2 }
		},
		template: `
      <div>
        <p class="mb-4">Cette démonstration compare un PasswordField avec <code>showSuccessMessages=true</code> (par défaut) et un avec <code>showSuccessMessages=false</code>.</p>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
          <div>
            <p class="text-subtitle-2 mb-2">Avec messages de succès</p>
            <PasswordField
              v-model="value1"
              label="Mot de passe avec messages de succès"
              required
              showSuccessMessages
            />
          </div>

          <div>
            <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
            <PasswordField
              v-model="value2"
              label="Mot de passe sans messages de succès"
              required
              :showSuccessMessages="false"
            />
          </div>
        </div>

        <div class="mt-4 text-body-2">
          <p>Observations :</p>
          <ul>
            <li class="ml-4">Les deux champs ont la même valeur valide</li>
            <li class="ml-4">Le champ de gauche affiche un message de succès et un indicateur visuel vert</li>
            <li class="ml-4">Le champ de droite n'affiche pas de message de succès, mais conserve l'indicateur visuel</li>
            <li class="ml-4">Essayez de modifier les valeurs puis de les rendre à nouveau valides</li>
          </ul>
        </div>
      </div>
    `,
	}),
}

export const DisableErrorHandling: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		docs: {
			description: {
				story: `
### Désactivation de la gestion des erreurs

Cette story illustre l'utilisation de la propriété \`disableErrorHandling\` qui permet de désactiver complètement
la gestion et l'affichage des erreurs dans un champ, même si des règles de validation sont définies.

Cela peut être utile dans des cas particuliers où vous souhaitez définir des règles de validation
mais gérer leur affichage différemment, ou utiliser la validation uniquement au niveau du formulaire parent.
`,
			},
		},
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
  <!-- Champ avec validation normale -->
  <PasswordField
    v-model="value1"
    label="Mot de passe avec validation"
    required
    :custom-rules="customRules"
  />

  <!-- Champ avec gestion d'erreurs désactivée -->
  <PasswordField
    v-model="value2"
    label="Mot de passe sans gestion d'erreurs"
    required
    disableErrorHandling
    :custom-rules="customRules"
  />
</template>`,
			},
		],
	},
	render: () => ({
		components: { PasswordField },
		setup() {
			const value1 = ref('')
			const value2 = ref('')

			const customRules = [
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							if (!value || value.length < 8) {
								return 'Le mot de passe doit contenir au moins 8 caractères'
							}
							return true
						},
						fieldIdentifier: 'password',
					},
				},
			]

			return { value1, value2, customRules }
		},
		template: `
			<div>
				<p class="mb-4">Cette démonstration compare un PasswordField standard et un avec \`disableErrorHandling=true\`.</p>

				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
					<div>
						<p class="text-subtitle-2 mb-2">Validation normale</p>
						<PasswordField
							v-model="value1"
							label="Mot de passe avec validation"
							required
							:custom-rules="customRules"
						/>
					</div>

					<div>
						<p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
						<PasswordField
							v-model="value2"
							label="Mot de passe sans gestion d'erreurs"
							required
							disableErrorHandling
							:custom-rules="customRules"
						/>
					</div>
				</div>

				<div class="mt-4 text-body-2">
					<p>Instructions :</p>
					<ol>
						<li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
						<li class="ml-4">Le champ de gauche affichera une erreur requise, mais pas celui de droite</li>
						<li class="ml-4">Vous pouvez également essayer de soumettre les deux champs pour voir la différence de comportement</li>
					</ol>
				</div>
			</div>
		`,
	}),
}

/**
 * Validation déclenchée à chaque frappe (isValidateOnBlur: false).
 */
export const ValidateOnInput: Story = {
	parameters: {
		docs: {
			description: {
				story: `
### Validation à la saisie

Lorsque \`isValidateOnBlur\` vaut \`false\`, la validation se déclenche à chaque modification
de la valeur plutôt qu'à la perte de focus. Utile pour un retour immédiat à l'utilisateur.
`,
			},
		},
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PasswordField
		v-model="password"
		label="Mot de passe"
		required
		:is-validate-on-blur="false"
		:custom-rules="[
			{
				type: 'custom',
				options: {
					message: 'Au moins 8 caractères requis',
					validate: (value) => value.length >= 8,
				},
			},
		]"
		show-success-messages
	/>
</template>`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')
</script>`,
			},
		],
	},
	render: args => ({
		components: { PasswordField },
		setup() {
			const password = ref('')
			return { args, password }
		},
		template: `
			<div>
				<p class="mb-4">La validation se déclenche à chaque frappe (<code>isValidateOnBlur="false"</code>).</p>
				<PasswordField
					v-model="password"
					label="Mot de passe"
					required
					:is-validate-on-blur="false"
					:custom-rules="[
						{
							type: 'custom',
							options: {
								message: 'Au moins 8 caractères requis',
								validate: (value) => value.length >= 8,
							},
						},
					]"
					show-success-messages
				/>
			</div>
		`,
	}),
}

/**
 * Messages de validation injectés directement par le parent (errorMessages, warningMessages, successMessages).
 */
export const ExternalMessages: Story = {
	parameters: {
		docs: {
			description: {
				story: `
### Messages externes

Les props \`errorMessages\`, \`warningMessages\` et \`successMessages\`
`,
			},
		},
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PasswordField
		v-model="password"
		label="Mot de passe"
		:error-messages="errorMessages"
		:warning-messages="warningMessages"
		:success-messages="successMessages"
		:showSuccessMessages='true'
	/>
	<div class="mt-4">
		<VBtn @click="setError">Simuler une erreur</VBtn>
		<VBtn @click="setWarning" class="ml-2">Simuler un avertissement</VBtn>
		<VBtn @click="setSuccess" class="ml-2">Simuler un succès</VBtn>
		<VBtn @click="reset" class="ml-2">Réinitialiser</VBtn>
	</div>
</template>`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')
const errorMessages = ref<string[] | null>(null)
const warningMessages = ref<string[] | null>(null)
const successMessages = ref<string[] | null>(null)

function setError() {
	errorMessages.value = ['Ce mot de passe a déjà été utilisé']
	warningMessages.value = null
	successMessages.value = null
}
function setWarning() {
	errorMessages.value = null
	warningMessages.value = ['Ce mot de passe figure dans une liste de mots de passe courants']
	successMessages.value = null
}
function setSuccess() {
	errorMessages.value = null
	warningMessages.value = null
	successMessages.value = ['Mot de passe accepté par le serveur']
}
function reset() {
	errorMessages.value = null
	warningMessages.value = null
	successMessages.value = null
}
</script>`,
			},
		],
	},
	render: args => ({
		components: { PasswordField },
		setup() {
			const password = ref('')
			const errorMessages = ref<string[] | null>(null)
			const warningMessages = ref<string[] | null>(null)
			const successMessages = ref<string[] | null>(null)

			function setError() {
				errorMessages.value = ['Ce mot de passe a déjà été utilisé']
				warningMessages.value = null
				successMessages.value = null
			}
			function setWarning() {
				errorMessages.value = null
				warningMessages.value = ['Ce mot de passe figure dans une liste de mots de passe courants']
				successMessages.value = null
			}
			function setSuccess() {
				errorMessages.value = null
				warningMessages.value = null
				successMessages.value = ['Mot de passe accepté par le serveur']
			}
			function reset() {
				errorMessages.value = null
				warningMessages.value = null
				successMessages.value = null
			}

			return { args, password, errorMessages, warningMessages, successMessages, setError, setWarning, setSuccess, reset }
		},
		template: `
			<div>
				<p class="mb-4">
					Les messages ci-dessous sont injectés par le parent sans déclencher de règle de validation.
				</p>
				<PasswordField
					v-model="password"
					label="Mot de passe"
					:error-messages="errorMessages"
					:warning-messages="warningMessages"
					:success-messages="successMessages"
					:showSuccessMessages='true'
				/>
				<div class="mt-4 d-flex flex-wrap ga-2">
					<VBtn color="error" @click="setError">Simuler une erreur</VBtn>
					<VBtn color="warning" @click="setWarning">Simuler un avertissement</VBtn>
					<VBtn color="success" @click="setSuccess">Simuler un succès</VBtn>
					<VBtn @click="reset">Réinitialiser</VBtn>
				</div>
			</div>
		`,
	}),
}

export const VFormVuetifyValidation: Story = {
	parameters: {
		docs: {
			description: {
				story: `
### Validation de style Vuetify

En passant \`useVuetifyValidation="true"\`, le composant délègue la validation à Vuetify.
Les règles sont de simples fonctions qui retournent \`true\` si la valeur est valide,
ou un message d'erreur (chaîne de caractères) sinon — exactement comme avec la prop \`rules\`
native de Vuetify (\`VTextField\`, etc.).

Cela permet de réutiliser des règles existantes écrites pour Vuetify sans adaptation.
`,
			},
		},
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<VForm @submit.prevent="handleSubmit">
		<PasswordField
			v-model="password"
			label="Mot de passe"
			:use-vuetify-validation="true"
			:rules="rules"
			:is-validate-on-blur="true"
		/>
		<div class="mt-4">
			<VBtn type="submit" color="primary">Valider</VBtn>
		</div>
	</VForm>
</template>`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')

const rules = [
	(value: string) => !!value || 'Le mot de passe est requis',
	(value: string) => value.length >= 8 || 'Au moins 8 caractères requis',
	(value: string) => /[A-Z]/.test(value) || 'Au moins une lettre majuscule requise',
	(value: string) => /[0-9]/.test(value) || 'Au moins un chiffre requis',
	(value: string) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || 'Au moins un caractère spécial requis',
]

async function handleSubmit(e) {
	const isValid = (await e).valid
	alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
}
</script>`,
			},
		],
	},
	render: args => ({
		components: { VForm, PasswordField, VBtn },
		setup() {
			const password = ref('')

			const rules = [
				(value: string) => !!value || 'Le mot de passe est requis',
				(value: string) => value.length >= 8 || 'Au moins 8 caractères requis',
				(value: string) => /[A-Z]/.test(value) || 'Au moins une lettre majuscule requise',
				(value: string) => /[0-9]/.test(value) || 'Au moins un chiffre requis',
				(value: string) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || 'Au moins un caractère spécial requis',
			]

			async function handleSubmit(e) {
				const isValid = (await e).valid
				alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
			}

			return { args, password, rules, handleSubmit }
		},
		template: `
			<div>
				<p class="mb-4">
					Les règles sont des fonctions Vuetify natives <code>(value) => true | 'message'</code>.
					Cliquez sur <strong>Valider</strong> ou quittez le champ pour déclencher la validation.
				</p>
				<VForm @submit.prevent="handleSubmit">
					<PasswordField
						v-bind="args"
						v-model="password"
						label="Mot de passe"
						:use-vuetify-validation="true"
						:rules="rules"
						:is-validate-on-blur="true"
					/>
					<div class="mt-4">
						<VBtn type="submit" color="primary">Valider</VBtn>
					</div>
				</VForm>
			</div>
		`,
	}),
}

export const SyFormValidation: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
    <SyForm @submit="handleSubmit">
        <PasswordField
            ref="fieldRef"
            v-model="password"
            label="Mot de passe"
            :custom-rules="customRules"
			required
        />
        <div class="mt-4">
            <VBtn type="submit" color="primary">Valider</VBtn>
        </div>
    </SyForm>
</template>`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')

const customRules = [
    {
        type: 'custom',
        options: {
            validate: (value: string) => {
                if (!value || value.length < 8) {
                    return 'Le mot de passe doit contenir au moins 8 caractères'
                }
                return true
            },
            fieldIdentifier: 'password',
        },
    },
    {
        type: 'custom',
        options: {
            validate: (value: string) => {
                if (!value || !/[A-Z]/.test(value)) {
                    return 'Le mot de passe doit contenir au moins une lettre majuscule'
                }
                return true
            },
            fieldIdentifier: 'password',
        },
    },
]

function handleSubmit(e) {
    // La validation est gérée par SyForm, on peut juste vérifier le résultat
    const isValid = e.isValid
    alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
}
</script>`,
			},
		],
	},
	render: args => ({
		components: { PasswordField, VBtn, SyForm },
		setup() {
			const password = ref('')

			const customRules = [
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							if (!value || value.length < 8) {
								return 'Le mot de passe doit contenir au moins 8 caractères'
							}
							return true
						},
						fieldIdentifier: 'password',
					},
				},
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							if (!value || !/[A-Z]/.test(value)) {
								return 'Le mot de passe doit contenir au moins une lettre majuscule'
							}
							return true
						},
						fieldIdentifier: 'password',
					},
				},
			]

			function handleSubmit(e) {
				// La validation est gérée par SyForm, on peut juste vérifier le résultat
				const isValid = e.isValid
				alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
			}

			return { args, password, customRules, handleSubmit }
		},
		template: `
            <div>
                <SyForm @submit="handleSubmit">
                    <PasswordField
                        v-model="password"
                        v-bind="args"
                        :custom-rules="customRules"
                    />
                    <div class="mt-4">
                        <VBtn type="submit" color="primary">Valider</VBtn>
                    </div>
                </SyForm>
            </div>
        `,
	}),
	args: {
		required: true,
	},
}

export const SyFormVuetifyValidation: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
    <SyForm @submit="handleSubmit">
        <PasswordField
            v-model="password"
            label="Mot de passe"
            :use-vuetify-validation="true"
            :rules="vuetifyRules"
        />
        <div class="mt-4">
            <VBtn type="submit" color="primary">Valider</VBtn>
        </div>
    </SyForm>
</template>`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')

const vuetifyRules = [
    (value: string) => !!value || 'Le mot de passe est requis',
    (value: string) => value.length >= 8 || 'Au moins 8 caractères requis',
    (value: string) => /[A-Z]/.test(value) || 'Au moins une lettre majuscule requise',
    (value: string) => /[0-9]/.test(value) || 'Au moins un chiffre requis',
    (value: string) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || 'Au moins un caractère spécial requis',
]

function handleSubmit(e) {
    const isValid = e.isValid
    alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
}
</script>`,
			},
		],
	},
	render: args => ({
		components: { PasswordField, VBtn, SyForm },
		setup() {
			const password = ref('')

			const vuetifyRules = [
				(value: string) => !!value || 'Le mot de passe est requis',
				(value: string) => value.length >= 8 || 'Au moins 8 caractères requis',
				(value: string) => /[A-Z]/.test(value) || 'Au moins une lettre majuscule requise',
				(value: string) => /[0-9]/.test(value) || 'Au moins un chiffre requis',
				(value: string) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || 'Au moins un caractère spécial requis',
			]

			function handleSubmit(e) {
				const isValid = e.isValid
				alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
			}

			return { args, password, vuetifyRules, handleSubmit }
		},
		template: `
            <div>
                <SyForm @submit="handleSubmit">
                    <PasswordField
                        v-model="password"
                        v-bind="args"
                        :use-vuetify-validation="true"
                        :rules="vuetifyRules"
                    />
                    <div class="mt-4">
                        <VBtn type="submit" color="primary">Valider</VBtn>
                    </div>
                </SyForm>
            </div>
        `,
	}),
}

export const VFormValidation: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<VForm @submit.prevent="handleSubmit">
		<PasswordField
			ref="fieldRef"
			v-model="password"
			label="Mot de passe"
			required
			:custom-rules="customRules"
		/>
		<div class="mt-4">
			<VBtn type="submit" color="primary">Valider</VBtn>
		</div>
	</VForm>
</template>`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')
const fieldRef = ref()

const customRules = [
	{
		type: 'custom',
		options: {
			validate: (value: string) => {
				return value.length >= 8
			},
			message: 'Au moins 8 caractères requis',
			fieldIdentifier: 'password',
		},
	},
	{
		type: 'custom',
		options: {
			validate: (value: string) => {
				return /[A-Z]/.test(value)
			},
			message: 'Au moins une lettre majuscule requise',
			fieldIdentifier: 'password',
		},
	},
]

async function handleSubmit() {
	const isValid = await fieldRef.value?.validateOnSubmit()
	alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
}
</script>`,
			},
		],
	},
	render: args => ({
		components: { PasswordField, VBtn },
		setup() {
			const password = ref('')
			const fieldRef = ref()

			const customRules = [
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							return value.length >= 8
						},
						message: 'Au moins 8 caractères requis',
						fieldIdentifier: 'password',
					},
				},
				{
					type: 'custom',
					options: {
						validate: (value: string) => {
							return /[A-Z]/.test(value)
						},
						message: 'Au moins une lettre majuscule requise',
						fieldIdentifier: 'password',
					},
				},
			]

			async function handleSubmit() {
				const isValid = await fieldRef.value?.validateOnSubmit()
				alert(isValid ? 'Mot de passe valide !' : 'Veuillez corriger les erreurs.')
			}

			return { args, password, fieldRef, customRules, handleSubmit }
		},
		template: `
			<div>
				<p class="mb-4">
					Il est préférable d'utiliser <code>SyForm</code> pour bénéficier de toutes les fonctionnalités de validation, mais voici un exemple d'utilisation avec <code>VForm</code> et la méthode <code>validateOnSubmit()</code> du champ.
				</p>
				<VForm @submit.prevent="handleSubmit">
					<PasswordField
						v-bind="args"
						ref="fieldRef"
						v-model="password"
						label="Mot de passe"
						required
						:custom-rules="customRules"
					/>
					<div class="mt-4">
						<VBtn type="submit" color="primary">Valider</VBtn>
					</div>
				</VForm>
			</div>
		`,
	}),
	args: {
		modelValue: '',
	},
}