import type { Meta, StoryObj } from '@storybook/vue3'
import PageContainer from './PageContainer.vue'
import { VCard } from 'vuetify/components'

const meta = {
	title: 'Composants/Layout/PageContainer',
	component: PageContainer,
	parameters: {
		layout: 'fullscreen',
		controls: { exclude: ['spacingClass', 'containerSize'] },
	},
	argTypes: {
		size: {
			options: ['xl', 'lg', 'md', 'sm', 'xs'],
			control: { type: 'select' },
			default: undefined,
		},
		spacing: {
			options: ['xl', 'lg', 'md', 'sm', 'xs'],
			control: { type: 'select' },
			default: undefined,
		},
		color: {
			options: ['transparent', 'primary', 'secondary', 'accent', 'error', 'info', 'success', 'warning'],
			control: { type: 'select' },
			default: 'transparent',
		},
		uniqueId: {
			control: { type: 'text' },
			default: undefined,
		},
		role: {
			options: ['main', 'region', 'navigation', 'contentinfo', 'banner'],
			control: { type: 'text' },
			default: undefined,
		},
	},
} as Meta<typeof PageContainer>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PageContainer>
		Contenu de la page
	</PageContainer>
</template>
				`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
	import { PageContainer } from '@cnamts/synapse'
</script>
				`,
			},
		],
	},
	args: {
		default: 'Contenu de la page',
	},
	render: (args) => {
		return {
			components: { PageContainer },
			setup() {
				return { args }
			},
			template: `
                <PageContainer :size="args.size" :spacing="args.spacing" :color="args.color" :uniqueId="args.uniqueId">
					{{ args.default }}
                </PageContainer>
            `,
		}
	},
}

export const Size: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PageContainer size="sm">
		Contenu de la page
	</PageContainer>
</template>
				`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
	import { PageContainer } from '@cnamts/synapse'
</script>
				`,
			},
		],
	},
	args: {
		default: 'Contenu de la page',
		size: 'sm',
	},
	render: (args) => {
		return {
			components: { PageContainer },
			setup() {
				return { args }
			},
			template: `
				<PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
					{{ args.default }}
				</PageContainer>
			`,
		}
	},
}

export const Color: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PageContainer color="primary">
		<div class="pa-8">
			Contenu de la page
		</div>
	</PageContainer>
</template>
				`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
	import { PageContainer } from '@cnamts/synapse'
</script>
				`,
			},
		],
	},
	args: {
		default: 'Contenu de la page',
		color: 'primary',
	},
	render: (args) => {
		return {
			components: { PageContainer },
			setup() {
				return { args }
			},
			template: `
				<PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
					<div class="pa-8">
						{{ args.default }}
					</div>
				</PageContainer>
			`,
		}
	},
}

export const Card: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PageContainer>
		<VCard class="pa-8">
			Contenu de la page
		</VCard>
	</PageContainer>
</template>
				`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
	import { PageContainer } from '@cnamts/synapse'
	import { VCard } from 'vuetify/components'
</script>
				`,
			},
		],
	},
	args: {
		default: 'Contenu de la page',
	},
	render: (args) => {
		return {
			components: { PageContainer, VCard },
			setup() {
				return { args }
			},
			template: `
				<PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
					<VCard class="pa-8">
						{{ args.default }}
					</VCard>
				</PageContainer>
			`,
		}
	},
}

export const WithAriaRole: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `<template>
	<PageContainer
		role="region"
		unique-id="main-content"
		aria-labelledby="main-content-title"
	>
		<h2 id="main-content-title">Contenu principal</h2>
		Contenu de la page
	</PageContainer>
</template>
				`,
			},
			{
				name: 'Script',
				code: `<script setup lang="ts">
	import { PageContainer } from '@cnamts/synapse'
</script>
				`,
			},
		],
	},
	args: {
		role: 'region',
		uniqueId: 'main-content',
		ariaLabelledby: 'main-content-title',
	},
	render: (args) => {
		return {
			components: { PageContainer },
			setup() {
				return { args }
			},
			template: `
				<PageContainer :role="args.role" :unique-id="args.uniqueId" :aria-labelledby="args.ariaLabelledby">
					<h2 id="main-content-title" class="pa-4">Contenu principal</h2>
					<p class="pa-4">Contenu de la page</p>
				</PageContainer>
			`,
		}
	},
}