import type { Meta, StoryObj } from '@storybook/vue3'
import {
	VStepper,
	VStepperHeader,
	VStepperItem,
	VStepperWindow,
	VStepperWindowItem,
	VStepperActions,
} from 'vuetify/components'
import { ref } from 'vue'

const meta: Meta<typeof VStepper> = {
	title: 'Composants/Composants Vuetify/VStepper',
	tags: ['!dev'],
	component: VStepper,
	parameters: {
		docs: {
			source: {
				transform: (src: string) =>
					src
						.replace(/VStepper/g, 'v-stepper')
						.replace(/VStepperHeader/g, 'v-stepper-header')
						.replace(/VStepperItem/g, 'v-stepper-item')
						.replace(/VStepperWindow/g, 'v-stepper-window')
						.replace(/VStepperWindowItem/g, 'v-stepper-window-item')
						.replace(/VStepperActions/g, 'v-stepper-actions'),
			},
		},
	},
	argTypes: {
		color: {
			control: { type: 'text' },
			description: 'Couleur du stepper',
		},
		disabled: {
			control: { type: 'boolean' },
			description: 'Désactive le stepper',
		},
		altLabels: {
			control: { type: 'boolean' },
			description: 'Affiche les labels en dessous des étapes',
		},
		flat: {
			control: { type: 'boolean' },
			description: 'Supprime l\'élévation du stepper',
		},
		hideActions: {
			control: { type: 'boolean' },
			description: 'Masque les boutons d\'action',
		},
	},
}

export default meta

type Story = StoryObj<typeof VStepper>

// Primary

export const Primary: Story = {
	render: args => ({
		components: {
			VStepper,
			VStepperHeader,
			VStepperItem,
			VStepperWindow,
			VStepperWindowItem,
			VStepperActions,
		},
		setup() {
			const step = ref(1)
			return { args, step }
		},
		template: `
            <VStepper v-bind="args" v-model="step">
                <template #default="{ prev, next }">
                    <VStepperHeader>
                        <VStepperItem title="Étape 1" :value="1" color="primary" />
                        <VStepperItem title="Étape 2" :value="2" color="primary" />
                        <VStepperItem title="Étape 3" :value="3" color="primary" />
                    </VStepperHeader>
                    
                    <VStepperWindow>
                        <VStepperWindowItem :value="1">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 1</h3>
                                <p>Ceci est le contenu de la première étape.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="2">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 2</h3>
                                <p>Ceci est le contenu de la deuxième étape.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="3">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 3</h3>
                                <p>Ceci est le contenu de la troisième étape.</p>
                            </div>
                        </VStepperWindowItem>
                    </VStepperWindow>
                    
                    <VStepperActions 
                        @click:prev="prev"
                        @click:next="next"
                        prev-text="Précédent" 
                        next-text="Suivant"
                    />
                </template>
            </VStepper>
        `,
	}),
	args: {
		color: 'primary',
	},
	parameters: {
		docs: {
			source: {
				code: `<v-stepper v-model="step" color="primary">
    <template #default="{ prev, next }">
        <v-stepper-header>
            <v-stepper-item title="Étape 1" :value="1" color="primary" />
            <v-stepper-item title="Étape 2" :value="2" color="primary" />
            <v-stepper-item title="Étape 3" :value="3" color="primary" />
        </v-stepper-header>
        
        <v-stepper-window>
            <!-- contenu -->
        </v-stepper-window>
        
        <v-stepper-actions 
            @click:prev="prev"
            @click:next="next"
            prev-text="Précédent" 
            next-text="Suivant"
        />
    </template>
</v-stepper>`,
			},
		},
	},
}

export const PrimaryAltLabels: Story = {
	render: args => ({
		components: {
			VStepper,
			VStepperHeader,
			VStepperItem,
			VStepperWindow,
			VStepperWindowItem,
			VStepperActions,
		},
		setup() {
			const step = ref(2)
			return { args, step }
		},
		template: `
            <VStepper v-bind="args" v-model="step">
                <template #default="{ prev, next }">
                    <VStepperHeader>
                        <VStepperItem title="Étape 1" subtitle="Description" :value="1" color="primary" />
                        <VStepperItem title="Étape 2" subtitle="Description" :value="2" color="primary" />
                        <VStepperItem title="Étape 3" subtitle="Description" :value="3" color="primary" />
                    </VStepperHeader>
                    
                    <VStepperWindow>
                        <VStepperWindowItem :value="1">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 1</h3>
                                <p>Labels alternatifs affichés en dessous.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="2">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 2</h3>
                                <p>Labels alternatifs affichés en dessous.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="3">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 3</h3>
                                <p>Labels alternatifs affichés en dessous.</p>
                            </div>
                        </VStepperWindowItem>
                    </VStepperWindow>
                    
                    <VStepperActions 
                        @click:prev="prev"
                        @click:next="next"
                        prev-text="Précédent" 
                        next-text="Suivant"
                    />
                </template>
            </VStepper>
        `,
	}),
	args: {
		color: 'primary',
		altLabels: true,
	},
	parameters: {
		docs: {
			source: {
				code: `<v-stepper v-model="step" color="primary" alt-labels>
    <template #default="{ prev, next }">
        <!-- contenu -->
        <v-stepper-actions 
            @click:prev="prev"
            @click:next="next"
            prev-text="Précédent" 
            next-text="Suivant"
        />
    </template>
</v-stepper>`,
			},
		},
	},
}

export const PrimaryFlat: Story = {
	render: args => ({
		components: {
			VStepper,
			VStepperHeader,
			VStepperItem,
			VStepperWindow,
			VStepperWindowItem,
			VStepperActions,
		},
		setup() {
			const step = ref(3)
			return { args, step }
		},
		template: `
            <VStepper v-bind="args" v-model="step">
                <template #default="{ prev, next }">
                    <VStepperHeader>
                        <VStepperItem title="Étape 1" :value="1" color="primary" />
                        <VStepperItem title="Étape 2" :value="2" color="primary" />
                        <VStepperItem title="Étape 3" :value="3" color="primary" />
                    </VStepperHeader>
                    
                    <VStepperWindow>
                        <VStepperWindowItem :value="1">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 1</h3>
                                <p>Stepper sans élévation (flat).</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="2">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 2</h3>
                                <p>Stepper sans élévation (flat).</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="3">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 3</h3>
                                <p>Stepper sans élévation (flat).</p>
                            </div>
                        </VStepperWindowItem>
                    </VStepperWindow>
                    
                    <VStepperActions 
                        @click:prev="prev"
                        @click:next="next"
                        prev-text="Précédent" 
                        next-text="Suivant"
                    />
                </template>
            </VStepper>
        `,
	}),
	args: {
		color: 'primary',
		flat: true,
	},
	parameters: {
		docs: {
			source: {
				code: `<v-stepper v-model="step" color="primary" flat>
    <template #default="{ prev, next }">
        <!-- contenu -->
        <v-stepper-actions 
            @click:prev="prev"
            @click:next="next"
            prev-text="Précédent" 
            next-text="Suivant"
        />
    </template>
</v-stepper>`,
			},
		},
	},
}

export const PrimaryDisabled: Story = {
	render: args => ({
		components: {
			VStepper,
			VStepperHeader,
			VStepperItem,
			VStepperWindow,
			VStepperWindowItem,
			VStepperActions,
		},
		setup() {
			const step = ref(2)
			return { args, step }
		},
		template: `
            <VStepper v-bind="args" v-model="step">
                <template #default="{ prev, next }">
                    <VStepperHeader>
                        <VStepperItem title="Étape 1" :value="1" color="primary" />
                        <VStepperItem title="Étape 2" :value="2" color="primary" />
                        <VStepperItem title="Étape 3" :value="3" color="primary" />
                    </VStepperHeader>
                    
                    <VStepperWindow>
                        <VStepperWindowItem :value="1">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 1</h3>
                                <p>Stepper désactivé.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="2">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 2</h3>
                                <p>Stepper désactivé - Toutes les interactions sont désactivées.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="3">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 3</h3>
                                <p>Stepper désactivé.</p>
                            </div>
                        </VStepperWindowItem>
                    </VStepperWindow>
                    
                    <VStepperActions 
                        @click:prev="prev"
                        @click:next="next"
                        prev-text="Précédent" 
                        next-text="Suivant"
                    />
                </template>
            </VStepper>
        `,
	}),
	args: {
		color: 'primary',
		disabled: true,
	},
	parameters: {
		docs: {
			source: {
				code: `<v-stepper v-model="step" color="primary" disabled>
    <template #default="{ prev, next }">
        <!-- contenu -->
        <v-stepper-actions 
            @click:prev="prev"
            @click:next="next"
            prev-text="Précédent" 
            next-text="Suivant"
        />
    </template>
</v-stepper>`,
			},
		},
	},
}

export const PrimaryWithIcons: Story = {
	render: args => ({
		components: {
			VStepper,
			VStepperHeader,
			VStepperItem,
			VStepperWindow,
			VStepperWindowItem,
			VStepperActions,
		},
		setup() {
			const step = ref(2)
			return { args, step }
		},
		template: `
            <VStepper v-bind="args" v-model="step">
                <template #default="{ prev, next }">
                    <VStepperHeader>
                        <VStepperItem title="Informations" :value="1" color="primary">
                            <template v-slot:icon>
                                <span style="font-size: 20px;">👤</span>
                            </template>
                        </VStepperItem>
                        <VStepperItem title="Adresse" :value="2" color="primary">
                            <template v-slot:icon>
                                <span style="font-size: 20px;">📍</span>
                            </template>
                        </VStepperItem>
                        <VStepperItem title="Confirmation" :value="3" color="primary">
                            <template v-slot:icon>
                                <span style="font-size: 20px;">✓</span>
                            </template>
                        </VStepperItem>
                    </VStepperHeader>
                    
                    <VStepperWindow>
                        <VStepperWindowItem :value="1">
                            <div style="padding: 24px;">
                                <h3>Informations personnelles</h3>
                                <p>Saisissez vos informations personnelles.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="2">
                            <div style="padding: 24px;">
                                <h3>Adresse</h3>
                                <p>Saisissez votre adresse.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="3">
                            <div style="padding: 24px;">
                                <h3>Confirmation</h3>
                                <p>Vérifiez et confirmez vos informations.</p>
                            </div>
                        </VStepperWindowItem>
                    </VStepperWindow>
                    
                    <VStepperActions 
                        @click:prev="prev"
                        @click:next="next"
                        prev-text="Précédent" 
                        next-text="Suivant"
                    />
                </template>
            </VStepper>
        `,
	}),
	args: {
		color: 'primary',
	},
	parameters: {
		docs: {
			source: {
				code: `<v-stepper v-model="step" color="primary">
    <template #default="{ prev, next }">
        <v-stepper-header>
            <v-stepper-item title="Informations" :value="1" color="primary">
                <template v-slot:icon>
                    <span style="font-size: 20px;">👤</span>
                </template>
            </v-stepper-item>
            <!-- ... autres items avec icônes -->
        </v-stepper-header>
        <!-- Contenu et actions -->
        <v-stepper-actions 
            @click:prev="prev"
            @click:next="next"
            prev-text="Précédent" 
            next-text="Suivant"
        />
    </template>
</v-stepper>`,
			},
		},
	},
}

export const PrimaryWithError: Story = {
	render: args => ({
		components: {
			VStepper,
			VStepperHeader,
			VStepperItem,
			VStepperWindow,
			VStepperWindowItem,
			VStepperActions,
		},
		setup() {
			const step = ref(2)
			return { args, step }
		},
		template: `
            <VStepper v-bind="args" v-model="step">
                <template #default="{ prev, next }">
                    <VStepperHeader>
                        <VStepperItem title="Étape 1" :value="1" color="primary" complete />
                        <VStepperItem title="Étape 2" :value="2" color="primary" error />
                        <VStepperItem title="Étape 3" :value="3" color="primary" />
                    </VStepperHeader>
                    
                    <VStepperWindow>
                        <VStepperWindowItem :value="1">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 1</h3>
                                <p>Cette étape est complétée.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="2">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 2</h3>
                                <p style="color: rgb(var(--v-theme-error));">Cette étape contient des erreurs.</p>
                            </div>
                        </VStepperWindowItem>
                        
                        <VStepperWindowItem :value="3">
                            <div style="padding: 24px;">
                                <h3>Contenu de l'étape 3</h3>
                                <p>Ceci est le contenu de la troisième étape.</p>
                            </div>
                        </VStepperWindowItem>
                    </VStepperWindow>
                    
                    <VStepperActions 
                        @click:prev="prev"
                        @click:next="next"
                        prev-text="Précédent" 
                        next-text="Suivant"
                    />
                </template>
            </VStepper>
        `,
	}),
	args: {
		color: 'primary',
	},
	parameters: {
		docs: {
			source: {
				code: `<v-stepper v-model="step" color="primary">
    <template #default="{ prev, next }">
        <v-stepper-header>
            <v-stepper-item title="Étape 1" :value="1" color="primary" complete />
            <v-stepper-item title="Étape 2" :value="2" color="primary" error />
            <v-stepper-item title="Étape 3" :value="3" color="primary" />
        </v-stepper-header>
        <!-- Contenu et actions -->
        <v-stepper-actions 
            @click:prev="prev"
            @click:next="next"
            prev-text="Précédent" 
            next-text="Suivant"
        />
    </template>
</v-stepper>`,
			},
		},
	},
}