import type { Meta, StoryObj } from '@storybook/vue3-vite'
import PeriodField from './PeriodField.vue'
import { ref } from 'vue'

// Type pour les méthodes exposées par PeriodField
type ValidationMessage = { type: string, message: string }[]

interface PeriodFieldExpose {
	validateOnSubmit: () => boolean
	errors: Record<string, ValidationMessage>
	successes: Record<string, ValidationMessage>
	warnings: Record<string, ValidationMessage>
	isValid: boolean
}

const meta: Meta<typeof PeriodField> = {
	title: 'Composants/Formulaires/PeriodField',
	component: PeriodField,
	decorators: [
		() => ({
			template: '<div style="padding: 20px;"><story/></div>',
		}),
	],
	parameters: {
		layout: 'fullscreen',
		controls: { exclude: ['modelValue'] },
	},
	argTypes: {
		locales: {
			description: 'Surcharge des chaînes affichées à l\'utilisateur (messages de validation des dates de début et de fin). Les valeurs par défaut sont définies dans le fichier `locales.ts` du composant. La prop accepte un objet partiel : seules les clés renseignées surchargent les valeurs par défaut, le reste est conservé.',
			control: 'object',
			table: {
				type: { summary: 'object', detail: `{
	fromAfterTo: string,
	fromValid: string,
	fromRequired: string,
	fromFilled: string,
	toBeforeFrom: string,
	toValid: string,
	toRequired: string,
	toFilled: string,
}` },
				category: 'props',
			},
		},
		modelValue: {
			control: 'text',
			description: 'Valeur du champ',
			table: {
				type: {
					summary: 'object',
				},
			},
		},
		placeholderFrom: {
			control: 'text',
			description: 'Placeholder pour la date de début',
		},
		placeholderTo: {
			control: 'text',
			description: 'Placeholder pour la date de fin',
		},
		format: {
			control: 'select',
			options: ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD'],
			description: 'Format d\'affichage de la date',
		},
		dateFormatReturn: {
			control: 'select',
			options: ['', 'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD'],
			description: 'Format de la date pour la valeur de retour',
		},
		isOutlined: {
			control: 'boolean',
			description: 'Affiche le champ en contour',
		},
		required: {
			control: 'boolean',
			description: 'Champ obligatoire',
		},
		displayIcon: {
			control: 'boolean',
			description: 'Affiche l\'icône calendrier',
		},
		displayAppendIcon: {
			control: 'boolean',
			description: 'Icône à la fin du champ',
		},
		disabled: {
			control: 'boolean',
			description: 'Désactive le champ',
		},
		noIcon: {
			control: 'boolean',
			description: 'Masque toutes les icônes',
		},
		noCalendar: {
			control: 'boolean',
			description: 'Désactive le calendrier',
		},
		customRules: {
			control: 'object',
			description: 'Règles de validation',
		},
		customWarningRules: {
			control: 'object',
			description: 'Règles d\'avertissement',
		},
		disableErrorHandling: {
			control: 'boolean',
			description: 'Désactive la gestion des erreurs',
		},
		showSuccessMessages: {
			control: 'boolean',
			description: 'Affiche les messages de succès',
		},
		errors: {
			description: 'Tableaux réactif contenant tous les messages d\'erreur. Combine les erreurs injectées via errorMessages et celles générées par la validation. Les doublons sont supprimés et le tableau est limité selon maxErrors. Accessible via template ref du composant.',
			table: {
				type: { summary: `{
			fromDate: Readonly<Ref<readonly string[]>>,
			toDate: Readonly<Ref<readonly string[]>>
		}` },
				category: 'expose',
			},
		},
		warnings: {
			description: 'Tableaux réactif contenant tous les messages d\'avertissement. Combine les avertissements injectés via warningMessages et ceux générés par customWarningRules. Les doublons sont supprimés et le tableau est limité selon maxErrors. Accessible via template ref du composant.',
			table: {
				type: { summary: `{
			fromDate: Readonly<Ref<readonly string[]>>,
			toDate: Readonly<Ref<readonly string[]>>
		}` },
				category: 'expose',
			},
		},
		successes: {
			description: 'Tableaux réactif contenant tous les messages de succès. Combine les succès injectés via successMessages et ceux générés par customSuccessRules. Les doublons sont supprimés et le tableau est limité selon maxErrors. Accessible via template ref du composant.',
			table: {
				type: { summary: `{
			fromDate: Readonly<Ref<readonly string[]>>,
			toDate: Readonly<Ref<readonly string[]>>
		}` },
				category: 'expose',
			},
		},
		isValid: {
			description: 'Vrai si le champ est valide.',
			table: {
				type: { summary: 'boolean' },
				category: 'expose',
			},
		},
		validateOnSubmit: {
			description: 'Fonction qui permet de déclencher la validation du champ.',
			table: {
				type: { summary: '() => promise<boolean>' },
				category: 'expose',
			},
		},
		clearValidation: {
			description: 'Fonction qui permet de réinitialiser la validation du champ.',
			table: {
				type: { summary: '() => void' },
				category: 'expose',
			},
		},
	},
} as Meta<typeof PeriodField>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField v-model="selectedPeriod" />
					<p>Période sélectionnée : <pre>{{ selectedPeriod }}</pre></p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: null, to: null })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: false,
		displayIcon: true,
		displayAppendIcon: false,
		disabled: false,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: null, to: null })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const CustomPlaceholders: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod" 
						placeholder-from="Début de la période"
						placeholder-to="Fin de la période"
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: null, to: null })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début de la période',
		placeholderTo: 'Fin de la période',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: false,
		displayIcon: true,
		displayAppendIcon: false,
		disabled: false,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: null, to: null })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const Disabled: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod" 
						disabled
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: null, to: null })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: false,
		displayIcon: true,
		displayAppendIcon: false,
		disabled: true,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: null, to: null })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
              </div>
            `,
	}),
}

export const Required: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod"
						required
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: null, to: null })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: true,
		displayIcon: true,
		displayAppendIcon: false,
		disabled: false,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: null, to: null })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const AppendIcon: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod"
						displayAppendIcon
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: null, to: null })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		required: true,
		displayIcon: true,
		displayAppendIcon: true,
		disabled: false,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: null, to: null })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const WithoutIcon: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod"
						:display-icon="false"
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: null, to: null })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: true,
		displayIcon: false,
		displayAppendIcon: true,
		disabled: false,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: null, to: null })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const WithError: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod"
						:custom-rules="[
							{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd'hui' } }
						]"
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: '01/01/2100', to: '05/01/2100' })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: true,
		displayIcon: false,
		displayAppendIcon: true,
		disabled: false,
		noIcon: false,
		modelValue: { from: '01/01/2100', to: '05/01/2100' },
		customRules: [
			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\'hui' } },
		],
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: '01/01/2100', to: '05/01/2100' })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const WithWarning: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod"
						:custom-warning-rules="[
							{ type: 'notBeforeDate', options: { 
								warningMessage: 'Attention : les dates sont antérieures au 02/01/2031',
								date: '02/01/2031',
								isWarning: true,
								fieldIdentifier: 'fromDate'
							} }
						]"
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const date = ref('20/12/2031')
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: true,
		displayIcon: false,
		displayAppendIcon: true,
		disabled: false,
		noIcon: false,
		modelValue: { from: '20/12/2023', to: '21/12/2023' },
		customWarningRules: [
			{
				type: 'notBeforeDate', options: {
					warningMessage: 'Attention : les dates sont antérieures au 02/01/2031',
					date: '02/01/2031',
					isWarning: true,
				},
			},
		],
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: '20/12/2023', to: '21/12/2023' })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const WithSuccess: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField
						v-model="selectedPeriod"
						:show-success-messages="true"
						:custom-rules="[
							{ type: 'notWeekend', options: { message: 'La date ne peut pas être un weekend', successMessage: 'La date n\\'est pas un week-end' } }
						]"
					/>
					<p>Période sélectionnée : {{ selectedPeriod }}</p>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: '22/01/2024', to: '23/01/2024 })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		displayIcon: false,
		displayAppendIcon: true,
		disabled: false,
		noIcon: false,
		showSuccessMessages: true,
		modelValue: { from: '22/01/2024', to: '23/01/2024' },
		customRules: [
			{
				type: 'notWeekend',
				options: {
					message: 'La date ne peut pas être un weekend',
					successMessage: 'La date n\'est pas un week-end',
				},
			},
		],
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value = ref({ from: '22/01/2024', to: '23/01/2024' })
			return { args, value }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value"/>
                <p>Période sélectionnée : {{ value }}</p>
              </div>
            `,
	}),
}

export const DifferentFormats: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<PeriodField 
						v-model="selectedPeriod"
						format="DD/MM/YYYY"
						class="mb-4" 
					 />
					<PeriodField 
						v-model="selectedPeriod"
						format="MM/DD/YYYY"
						class="mb-4" 
					 />
					<PeriodField 
						v-model="selectedPeriod"
						format="YYYY-MM-DD"
						class="mb-4" 
					 />
					<PeriodField 
						v-model="selectedPeriod"
						format="DD-MM-YY"
						class="mb-4" 
					 />
					<PeriodField 
						v-model="selectedPeriod"
						format="DD.MM.YYYY"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const selectedPeriod = ref({ from: '12/10/2023', to: '15/10/2023' })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: false,
		displayIcon: true,
		displayAppendIcon: false,
		disabled: false,
		noIcon: false,
		modelValue: { from: '12/10/2023', to: '15/10/2023' },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
			const value2 = ref({ from: '10/12/2023', to: '10/15/2023' })
			const value3 = ref({ from: '2023-10-12', to: '2023-10-15' })
			const value4 = ref({ from: '12-10-23', to: '15-10-23' })
			const value5 = ref({ from: '12.10.2023', to: '15.10.2023' })
			return { args, value1, value2, value3, value4, value5 }
		},
		template: `
              <div class="pa-4">
                <PeriodField v-bind="args" v-model="value1" format="DD/MM/YYYY" class="mb-4" />
                <PeriodField v-bind="args" v-model="value2" format="MM/DD/YYYY" class="mb-4" />
                <PeriodField v-bind="args" v-model="value3" format="YYYY-MM-DD" class="mb-4" />
                <PeriodField v-bind="args" v-model="value4" format="DD-MM-YY" class="mb-4" />
                <PeriodField v-bind="args" v-model="value5" format="DD.MM.YYYY"/>
              </div>
            `,
	}),
}

export const WithDateFormatReturn: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
			<template>
				<span class="mb-4">Période de retour : {{ value1 }}</span>
				<PeriodField
					v-model="value1"
					format="DD/MM/YYYY"
				/>

				<span class="mb-4">Période de retour : {{ value2 }}</span>
				<PeriodField
					v-model="value2"
					format="DD/MM/YYYY"
					date-format-return="MM/DD/YYYY"
				/>

				<span class="mb-4">Période de retour : {{ value3 }}</span>
				<PeriodField
					v-model="value3"
					format="DD/MM/YYYY"
					date-format-return="YYYY-MM-DD"
				/>
			</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { ref } from 'vue'
					import { PeriodField } from '@cnamts/synapse'
					
					const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
					const value2 = ref({ from: '12/10/2023', to: '15/10/2023' })
					const value3 = ref({ from: '12/10/2023', to: '15/10/2023' })
				</script>
				`,
			},
		],
	},
	args: {
		placeholderFrom: 'Début',
		placeholderTo: 'Fin',
		format: 'DD/MM/YYYY',
		dateFormatReturn: '',
		required: false,
		displayIcon: true,
		displayAppendIcon: false,
		disabled: false,
		noIcon: false,
		modelValue: { from: null, to: null },
	},
	render: args => ({
		components: { PeriodField: PeriodField },
		setup() {
			const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
			const value2 = ref({ from: '12/10/2023', to: '15/10/2023' })
			const value3 = ref({ from: '12/10/2023', to: '15/10/2023' })
			const valueReturn1 = ref({ from: '12/10/2023', to: '15/10/2023' })
			const valueReturn2 = ref({ from: '10/12/2023', to: '10/15/2023' })
			const valueReturn3 = ref({ from: '2023/12/10', to: '2023/15/10' })
			return { args, value1, value2, value3, valueReturn1, valueReturn2, valueReturn3 }
		},
		template: `
              <div class="pa-4">
                <span>Période de retour : {{ valueReturn1 }}<br/><br/></span>
                <PeriodField
                    v-bind="args"
                    v-model="value1"
                    format="DD/MM/YYYY"
                    date-format-return="DD/MM/YYYY"
                />

                <span>Période de retour : {{ valueReturn2 }}<br/><br/></span>
                <PeriodField
                    v-bind="args"
                    v-model="value2"
                    format="DD/MM/YYYY"
                    date-format-return="MM/DD/YYYY"
                />

                <span>Période de retour : {{ valueReturn3 }}<br/><br/></span>
                <PeriodField
                    v-bind="args"
                    v-model="value3"
                    format="DD/MM/YYYY"
                    date-format-return="YYYY-MM-DD"
                />
              </div>
            `,
	}),
}

export const ValidationBehaviors: Story = {
	parameters: {
		sourceCode: [
			{
				code: `<template>
	<div class="mb-8">
		<h3 class="mb-4">Par défaut (avec validation)</h3>
		<PeriodField
			v-model="periodDefault"
			required
		/>
	</div>

	<div class="mb-8">
		<h3 class="mb-4">Validation désactivée (disableErrorHandling=true)</h3>
		<PeriodField
			v-model="periodNoErrors"
			required
			:disable-error-handling="true"
		/>
	</div>

	<div class="mb-8">
		<h3 class="mb-4">Messages de succès désactivés (showSuccessMessages=false)</h3>
		<PeriodField
			v-model="periodNoSuccess"
			required
			:show-success-messages="false"
		/>
	</div>

	<div class="mb-8">
		<h3 class="mb-4">Validation et messages de succès désactivés</h3>
		<PeriodField
			v-model="periodNoValidation"
			required
			:disable-error-handling="true"
			:show-success-messages="false"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PeriodField from '../PeriodField.vue'

const periodDefault = ref({ from: null, to: null })
const periodNoErrors = ref({ from: null, to: null })
const periodNoSuccess = ref({ from: null, to: null })
const periodNoValidation = ref({ from: null, to: null })
</script>`,
			},
		],
	},
	render: args => ({
		components: { PeriodField },
		setup() {
			const periodDefault = ref({ from: null, to: null })
			const periodNoErrors = ref({ from: null, to: null })
			const periodNoSuccess = ref({ from: null, to: null })
			const periodNoValidation = ref({ from: null, to: null })

			return {
				args,
				periodDefault,
				periodNoErrors,
				periodNoSuccess,
				periodNoValidation,
			}
		},
		template: `
			<div class="mb-8">
				<h3 class="mb-4">Par défaut (avec validation)</h3>
				<PeriodField
					v-model="periodDefault"
					required
				/>
			</div>

			<div class="mb-8">
				<h3 class="mb-4">Validation désactivée (disableErrorHandling=true)</h3>
				<PeriodField
					v-model="periodNoErrors"
					required
					:disable-error-handling="true"
				/>
			</div>

			<div class="mb-8">
				<h3 class="mb-4">Messages de succès désactivés (showSuccessMessages=false)</h3>
				<PeriodField
					v-model="periodNoSuccess"
					required
					:show-success-messages="false"
				/>
			</div>

			<div class="mb-8">
				<h3 class="mb-4">Validation et messages de succès désactivés</h3>
				<PeriodField
					v-model="periodNoValidation"
					required
					:disable-error-handling="true"
					:show-success-messages="false"
				/>
			</div>
		`,
	}),
}

export const FormValidation: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<v-form @submit.prevent="submitForm" ref="formRef">
						<v-container>
							<v-row>
								<v-col cols="12">
									<h3>Formulaire avec validation</h3>
								</v-col>
								<v-col cols="12" md="6">
									<PeriodField
										v-model="form.period"
										ref="periodFieldRef"
										required
										:custom-rules="periodRules"
										placeholder-from="Début de l'événement"
										placeholder-to="Fin de l'événement"
									/>
								</v-col>
								<v-col cols="12">
									<v-btn type="submit" color="primary" :disabled="isSubmitting">Valider</v-btn>
								</v-col>
							</v-row>
							
							<v-row v-if="isFormSubmitted">
								<v-col cols="12">
									<v-alert
										type="success"
										class="mt-4"
									>
										Formulaire envoyé avec succès !
									</v-alert>
									<pre>{{ formData }}</pre>
								</v-col>
							</v-row>
						</v-container>
					</v-form>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
				import { ref } from 'vue'
				import { PeriodField } from '@cnamts/synapse'
				
				// Référence au formulaire
				const formRef = ref(null)
				const isSubmitting = ref(false)
				const isFormSubmitted = ref(false)
				const formData = ref(null)
				
				// Données du formulaire
				const form = {
					name: '',
					period: { from: null, to: null }
				}
				
				// Règles de validation pour le champ période
				const periodRules = [
					{ 
						type: 'custom', 
						options: { 
							validator: (value) => {
								if (!value.from || !value.to) return 'Les deux dates sont obligatoires'
								return true
							},
							successMessage: 'Période valide'
						}
					},
					{
						type: 'notAfterToday',
						options: { message: "La date ne peut pas être après aujourd'hui" }
					}
				]
				
				// Soumission du formulaire
				const submitForm = async (): Promise<void> => {
				if (periodFieldRef.value) {
					const isValid = await periodFieldRef.value.validateOnSubmit()
					if (isValid) {
						formStatus.value = 'Formulaire soumis avec succès !'
						isFormSubmitted.value = true
						formData.value = JSON.stringify(form.value)
					}
					else {
						formStatus.value = 'Erreur de validation, veuillez corriger les champs'
					}
				}
			}
				</script>
				`,
			},
		],
	},
	render: () => ({
		components: { PeriodField },
		setup() {
			// Référence au formulaire
			const formRef = ref(null)
			const periodFieldRef = ref<PeriodFieldExpose | null>(null)
			const isSubmitting = ref(false)
			const isFormSubmitted = ref(false)
			const formData = ref<string | null>(null)
			const formStatus = ref('')

			// Données du formulaire
			const form = ref({
				period: { from: null, to: null },
			})

			// Règles de validation pour le champ période
			const periodRules = [
				{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourdhui' } },
			]

			// Soumission du formulaire
			const submitForm = async (): Promise<void> => {
				if (periodFieldRef.value) {
					const isValid = await periodFieldRef.value.validateOnSubmit()
					if (isValid) {
						formStatus.value = 'Formulaire soumis avec succès !'
						isFormSubmitted.value = true
						formData.value = JSON.stringify(form.value)
					}
					else {
						formStatus.value = 'Erreur de validation, veuillez corriger les champs'
					}
				}
			}

			return {
				formRef,
				periodFieldRef,
				isSubmitting,
				isFormSubmitted,
				formData,
				form,
				periodRules,
				formStatus,
				submitForm,
			}
		},
		template: `
			<div class="pa-4">
				<VForm @submit.prevent="submitForm" ref="formRef">
					<VContainer>
						<VRow>
							<VCol cols="12">
								<h3>Formulaire avec validation</h3>
							</VCol>
							<VCol cols="12" md="6">
								<PeriodField
									v-model="form.period"
									ref="periodFieldRef"
									required
									:custom-rules="periodRules"
									placeholder-from="Début de l'événement"
									placeholder-to="Fin de l'événement"
								/>
							</VCol>
							<VCol cols="12">
								<VBtn type="submit" color="primary" :disabled="isSubmitting">Valider</VBtn>
							</VCol>
						</VRow>
						
						<VRow v-if="formStatus">
							<VCol cols="12">
									{{ formStatus }}
								<pre v-if="formData">{{ formData }}</pre>
							</VCol>
						</VRow>
					</VContainer>
				</VForm>
			</div>
		`,
	}),
}