import type { Meta, StoryObj } from '@storybook/vue3'
import SubHeader from './SubHeader.vue'
import { ref } from 'vue'
import { mdiStepBackward, mdiClose, mdiContentCopy } from '@mdi/js'
import type { DataListGroupItems } from '../DataListGroup/types'

const meta = {
	title: 'Composants/Structure/SubHeader',
	component: SubHeader,
	parameters: {
		layout: 'fullscreen',
	},
	argTypes: {
		'headingLevel': {
			control: { type: 'select' },
			options: [1, 2, 3, 4, 5, 6],
		},
		'hideBackBtn': {
			type: 'boolean',
			control: { type: 'boolean' },
			default: false,
			description: 'Masque le bouton de retour dans l\'en-tête',
		},
		'backBtnText': {
			type: 'string',
			control: { type: 'text' },
			default: 'Retour',
			description: 'Texte affiché sur le bouton de retour',
		},
		'backBtnAccessibleName': {
			type: 'string',
			control: { type: 'text' },
			default: 'Retour',
			description: 'Nom accessible pour le bouton de retour (aria-label)',
		},
		'titleText': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Texte du titre principal affiché dans l\'en-tête',
		},
		'titleAccessibleName': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Nom accessible pour le titre principal (aria-label)',
		},
		'subTitleText': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Texte du sous-titre affiché sous le titre principal',
		},
		'subTitleAccessibleName': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Nom accessible pour le sous-titre (aria-label)',
		},
		'dataListGroupItems': {
			control: { type: 'object' },
			description: 'Éléments de données à afficher dans la liste groupée sous l\'en-tête',
		},
		'loading': {
			type: 'boolean',
			control: { type: 'boolean' },
			default: false,
			description: 'Affiche un indicateur de chargement à la place du contenu',
		},
		'renderFixedHeight': {
			type: 'boolean',
			control: { type: 'boolean' },
			default: false,
			description: 'Applique une hauteur fixe au conteneur et ajoute une scrollbar horizontale si nécessaire',
		},
		'additional-informations': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Slot pour afficher des informations supplémentaires sous l\'en-tête',
		},
		'back-btn': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Slot pour personnaliser complètement le bouton de retour',
		},
		'back-btn-icon': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Slot pour personnaliser l\'icône du bouton de retour',
		},
		'title': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Slot pour personnaliser l\'affichage du titre principal',
		},
		'sub-title': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Slot pour personnaliser l\'affichage du sous-titre',
		},
		'right-content': {
			type: 'string',
			control: { type: 'text' },
			default: undefined,
			description: 'Slot pour ajouter du contenu à droite de l\'en-tête',
		},
		'vuetifyOptions': {
			control: { type: 'object' },
			default: () => ({
				menu: {
					location: 'end center',
					offset: 16,
					zIndex: 8,
					contentClass: 'sy-copy-tooltip-menu text-white text-body-2 ml-2',
				},
				btn: {
					icon: true,
					variant: 'text',
					density: 'comfortable',
				},
				icon: {
					color: 'grey-darken-20',
				},
			}),
		},
	},
} satisfies Meta<typeof SubHeader>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
				</script>
				`,
			},
		],
	},
	args: {
		'headingLevel': 2,
		'backBtnText': 'Retour',
		'hideBackBtn': false,
		'titleText': 'Paul Dupont',
		'subTitleText': '1 69 08 75 125 456 75',
		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		'loading': false,
		'dataListGroupItems': [],
		'additional-informations': undefined,
		'back-btn': undefined,
		'back-btn-icon': undefined,
		'title': undefined,
		'sub-title': undefined,
		'right-content': undefined,
		'vuetifyOptions': {
			sheet: {
				color: 'primary',
			},
			backBtn: {
				size: 'small',
				variant: 'text',
				class: 'font-weight-regular white--text px-1',
			},
		},
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: '<SubHeader v-bind="args" />',
		}
	},
}

export const BackgroundCustom: Story = {
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
<template>
  <SubHeader
    title-text="Paul Dupont"
    sub-title-text="1 69 08 75 125 456 75"
    sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
    :vuetifyOptions="{ sheet: { color: 'secondary' } }"
  />
</template>
        `,
			},
			{
				name: 'Script',
				code: `
<script setup lang="ts">
  import { SubHeader } from '@cnamts/synapse'
</script>
        `,
			},
		],
	},
	args: {
		headingLevel: 2,
		backBtnText: 'Retour',
		hideBackBtn: false,
		titleText: 'Paul Dupont',
		subTitleText: '1 69 08 75 125 456 75',
		subTitleAccessibleName: 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		loading: false,
		dataListGroupItems: [],
		vuetifyOptions: {
			sheet: {
				color: 'secondary',
			},
			backBtn: {
				size: 'small',
				variant: 'text',
				class: 'font-weight-regular white--text px-1',
			},
		},
	},
	render: args => ({
		components: { SubHeader },
		setup() {
			return { args }
		},
		template: '<SubHeader v-bind="args" />',
	}),
}

export const DataList: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'back-btn', 'back-btn-icon', 'title', 'sub-title', 'additional-informations', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
						:data-list-group-items="items"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'

					const items = [
						{
							title: 'Informations patient',
							items: [
								{ key: 'Date de naissance', value: '24/09/1970' },
								{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
							],
						},
						{
							title: 'Médecin traitant',
							items: [
								{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
								{ key: 'N° RPPS', value: 'XXXXX' },
							],
						},
						{
							title: 'Autres informations',
							items: [
								{ key: 'Dernière modification', value: '04/06/2020' },
							],
						},
					]
				</script>
				`,
			},
		],
	},
	args: {
		headingLevel: 2,
		backBtnText: 'Retour',
		hideBackBtn: false,
		titleText: 'Paul Dupont',
		subTitleText: '1 69 08 75 125 456 75',
		subTitleAccessibleName: 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		loading: false,
		dataListGroupItems: [
			{
				title: 'Informations patient',
				items: [
					{ key: 'Date de naissance', value: '24/09/1970' },
					{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
				],
			},
			{
				title: 'Médecin traitant',
				items: [
					{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
					{ key: 'N° RPPS', value: 'XXXXX' },
				],
			},
			{
				title: 'Autres informations',
				items: [
					{ key: 'Dernière modification', value: '04/06/2020' },
				],
			},
		],

	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: '<SubHeader v-bind="args" />',
		}
	},
}

export const DataListFixedHeight: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'back', 'click:list-item', 'back-btn', 'back-btn-icon', 'title', 'sub-title', 'additional-informations', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
						:data-list-group-items="items"
						:render-fixed-height="true"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'

					const items = [
						{
							title: 'Informations patient',
							items: [
								{ key: 'Date de naissance', value: '24/09/1970' },
								{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
							],
						},
						{
							title: 'Médecin traitant',
							items: [
								{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
								{ key: 'N° RPPS', value: 'XXXXX' },
							],
						},
						{
							title: 'Autres informations',
							items: [
								{ key: 'Dernière modification', value: '04/06/2020' },
							],
						},
					]
				</script>
				`,
			},
		],
	},
	args: {
		headingLevel: 2,
		backBtnText: 'Retour',
		hideBackBtn: false,
		titleText: 'Paul Dupont',
		subTitleText: '1 69 08 75 125 456 75',
		subTitleAccessibleName: 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		loading: false,
		renderFixedHeight: true,
		dataListGroupItems: [
			{
				title: 'Informations patient',
				items: [
					{ key: 'Date de naissance', value: '24/09/1970' },
					{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
				],
			},
			{
				title: 'Médecin traitant',
				items: [
					{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
					{ key: 'N° RPPS', value: 'XXXXX' },
				],
			},
			{
				title: 'Autres informations',
				items: [
					{ key: 'Dernière modification', value: '04/06/2020' },
				],
			},
		],

	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: '<SubHeader v-bind="args" />',
		}
	},
}

export const ActionBtn: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'back-btn', 'back-btn-icon', 'title', 'sub-title', 'additional-informations', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
						:data-list-group-items="items"
						@click:list-item="updateInfo"
					/>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
					import { ref } from 'vue'

					const items = ref([
						{
							title: 'Informations patient',
							items: [
								{ key: 'Date de naissance', value: '24/09/1970', action: 'Modifier' },
								{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
							],
						},
						{
							title: 'Médecin traitant',
							items: [
								{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
								{ key: 'N° RPPS', value: 'XXXXX' },
							],
						},
						{
							title: 'Autres informations',
							items: [
								{ key: 'Dernière modification', value: '04/06/2020' },
							],
						},
					])

					const updateInfo = (eventValue: { dataListIndex: number, itemIndex: number }) => {
                        if (items) {
							items[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'
						}
					}
				</script>
				`,
			},
		],
	},
	args: {
		headingLevel: 2,
		backBtnText: 'Retour',
		hideBackBtn: false,
		titleText: 'Paul Dupont',
		subTitleText: '1 69 08 75 125 456 75',
		subTitleAccessibleName: 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		loading: false,
		dataListGroupItems: [
			{
				title: 'Informations patient',
				items: [
					{ key: 'Date de naissance', value: '24/09/1970', action: 'Modifier' },
					{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
				],
			},
			{
				title: 'Médecin traitant',
				items: [
					{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
					{ key: 'N° RPPS', value: 'XXXXX' },
				],
			},
			{
				title: 'Autres informations',
				items: [
					{ key: 'Dernière modification', value: '04/06/2020' },
				],
			},
		],

	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				const updateInfo = (eventValue: { dataListIndex: number, itemIndex: number }) => {
					if (args.dataListGroupItems) {
						args.dataListGroupItems[eventValue.dataListIndex]!.items[eventValue.itemIndex]!.value = '12/01/2003'
					}
				}
				return { args, updateInfo }
			},
			template: `
				<SubHeader
					v-bind="args"
					@click:list-item="updateInfo"
				/>
			`,
		}
	},
}

export const HtmlValue: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'back-btn', 'back-btn-icon', 'title', 'sub-title', 'additional-informations', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
<template>
	<SubHeader
		title-text="Paul Dupont"
		sub-title-text="1 69 08 75 125 456 75"
		:data-list-group-items="items"
	>
		<template #item="{ item, itemValue }">
			<span v-if="item.key === 'Adresse'">
				<b>{{ itemValue }}</b><br>
				75020 Paris
			</span>

			<span v-else>
				{{ itemValue }}
			</span>
		</template>
	</SubHeader>
</template>
				`,
			},
			{
				name: 'Script',
				code: `
<script setup lang="ts">
	import { SubHeader } from '@cnamts/synapse'
	import type { DataListGroupItems } from '@cnamts/synapse'

	const items: DataListGroupItems = [
		{
			title: 'Informations patient',
			items: [
				{ key: 'Date de naissance', value: '24/09/1970' },
				{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre' },
			],
		},
		{
			title: 'Médecin traitant',
			items: [
				{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
				{ key: 'N° RPPS', value: 'XXXXX' },
			],
		},
		{
			title: 'Autres informations',
			items: [
				{ key: 'Dernière modification', value: '04/06/2020' },
			],
		},
	]
</script>
				`,
			},
		],
	},
	render: () => ({
		components: { SubHeader },
		setup() {
			const items: DataListGroupItems = [
				{
					title: 'Informations patient',
					items: [
						{ key: 'Date de naissance', value: '24/09/1970' },
						{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre, 75020 Paris' },
					],
				},
				{
					title: 'Médecin traitant',
					items: [
						{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
						{ key: 'N° RPPS', value: 'XXXXX' },
					],
				},
				{
					title: 'Autres informations',
					items: [
						{ key: 'Dernière modification', value: '04/06/2020' },
					],
				},
			]

			return { items }
		},
		template: `
			<SubHeader
				title-text="Paul Dupont"
				sub-title-text="1 69 08 75 125 456 75"
				:data-list-group-items="items"
			>
				<template #item="{ item, itemValue }">
					<span v-if="item.key === 'Adresse'">
						<b>{{ itemValue }}</b><br>
					</span>

					<span v-else>
						{{ itemValue }}
					</span>
				</template>
			</SubHeader>
		`,
	}),
}

export const Loading: Story = {
	parameters: {
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'additional-informations', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'back-btn', 'back-btn-icon', 'title', 'sub-title', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
						:data-list-group-items="items"
						loading
					>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'

					const items = [
						{
							title: 'Informations patient',
							items: [
								{ key: 'Date de naissance', value: '24/09/1970' },
								{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
							],
						},
						{
							title: 'Médecin traitant',
							items: [
								{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
								{ key: 'N° RPPS', value: 'XXXXX' },
							],
						},
						{
							title: 'Autres informations',
							items: [
								{ key: 'Dernière modification', value: '04/06/2020' },
							],
						},
					]
				</script>
				`,
			},
		],
	},
	args: {
		headingLevel: 2,
		backBtnText: 'Retour',
		hideBackBtn: false,
		titleText: 'Paul Dupont',
		subTitleText: '1 69 08 75 125 456 75',
		subTitleAccessibleName: 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		loading: true,
		dataListGroupItems: [
			{
				title: 'Informations patient',
				items: [
					{ key: 'Date de naissance', value: '24/09/1970' },
					{ key: 'Adresse', value: '50 Avenue du Professeur André Lemierre 75020 Paris' },
				],
			},
			{
				title: 'Médecin traitant',
				items: [
					{ key: 'Nom du praticien', value: 'Gérard Leblanc' },
					{ key: 'N° RPPS', value: 'XXXXX' },
				],
			},
			{
				title: 'Autres informations',
				items: [
					{ key: 'Dernière modification', value: '04/06/2020' },
				],
			},
		],
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: '<SubHeader v-bind="args" />',
		}
	},
}

export const SlotAdditionalInformations: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'back-btn', 'back-btn-icon', 'title', 'sub-title', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
					>
						<template #additional-informations>
							<VSpacer />
							<p class="white--text mt-8 mb-0">
								Profil complété à 50%
							</p>
							<VProgressLinear
								:model-value="50"
								color="#fff"
								height="8px"
								class="mt-2 mb-1"
								background-color="#fff"
								background-opacity=".24"
							/>
						</template>
					</SubHeader>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
				</script>
				`,
			},
		],
	},
	args: {
		'headingLevel': 2,
		'backBtnText': 'Retour',
		'hideBackBtn': false,
		'titleText': 'Paul Dupont',
		'subTitleText': '1 69 08 75 125 456 75',
		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		'loading': false,
		'additional-informations': `<template #additional-informations>
	<VSpacer />
	<p class="white--text mt-8 mb-0">
		Profil complété à 50%
	</p>
	<VProgressLinear
		:model-value="50"
		color="#fff"
		height="8px"
		class="mt-2 mb-1"
		background-color="#fff"
		background-opacity=".24"
	/>
</template>`,
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: `
				<SubHeader v-bind="args">
					<template #additional-informations>
						<VSpacer />
						<p class="white--text mt-8 mb-0">
							Profil complété à 50%
						</p>
						<VProgressLinear
							:model-value="50"
							color="#fff"
							height="8px"
							class="mt-2 mb-1"
							background-color="#fff"
							background-opacity=".24"
						/>
					</template>
				</SubHeader>
			`,
		}
	},
}

export const SlotBackBtn: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'additional-informations', 'back-btn-icon', 'title', 'sub-title', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
					>
						<template #back-btn>
							<VBtn
								color="white"
								variant="tonal"
								class="mb-4"
							>
								Retour
							</VBtn>
						</template>
					</SubHeader>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
				</script>
				`,
			},
		],
	},
	args: {
		'backBtnText': 'Retour',
		'hideBackBtn': false,
		'titleText': 'Paul Dupont',
		'subTitleText': '1 69 08 75 125 456 75',
		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		'loading': false,
		'headingLevel': 2,
		'back-btn': `<template #back-btn>
	<VBtn
		color="white"
		variant="tonal"
		class="mb-4"
	>
		Retour
	</VBtn>
</template>`,
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: `
				<SubHeader v-bind="args">
					<template #back-btn>
						<VBtn
							color="white"
							variant="tonal"
							class="mb-4"
						>
							Retour
						</VBtn>
					</template>
				</SubHeader>
			`,
		}
	},
}

export const SlotBackBtnIcon: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'additional-informations', 'back-btn', 'title', 'sub-title', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
					>
						<template #back-btn-icon>
							<VIcon class="mr-2">
								{{ backArrowIcon }}
							</VIcon>
						</template>
					</SubHeader>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
					import { mdiStepBackward } from '@mdi/js'

					const backArrowIcon = ref(mdiStepBackward)
				</script>
				`,
			},
		],
	},
	args: {
		'headingLevel': 2,
		'backBtnText': 'Retour',
		'hideBackBtn': false,
		'titleText': 'Paul Dupont',
		'subTitleText': '1 69 08 75 125 456 75',
		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		'loading': false,
		'back-btn-icon': `<template #back-btn-icon>
	<VIcon class="mr-2">
		{{ backArrowIcon }}
	</VIcon>
</template>`,
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				const backArrowIcon = ref(mdiStepBackward)
				return { args, backArrowIcon }
			},
			template: `
				<SubHeader v-bind="args">
					<template #back-btn-icon>
						<VIcon class="mr-2">
							{{ backArrowIcon }}
						</VIcon>
					</template>
				</SubHeader>
			`,
		}
	},
}

export const SlotTitle: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'additional-informations', 'back-btn', 'back-btn-icon', 'sub-title', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
					>
						<template #title>
							<h3 class="headline font-weight-bold mt-2">
								Dossier n°42
							</h3>
						</template>
					</SubHeader>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
				</script>
				`,
			},
		],
	},
	args: {
		headingLevel: 2,
		backBtnText: 'Retour',
		hideBackBtn: false,
		titleText: 'Paul Dupont',
		subTitleText: '1 69 08 75 125 456 75',
		subTitleAccessibleName: 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		loading: false,
		title: `<template #title>
	<h3 class="headline font-weight-bold mt-2">
		Dossier n°42
	</h3>
</template>`,
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: `
				<SubHeader v-bind="args">
					<template #title>
						<h3 class="headline font-weight-bold mt-2">
							Dossier n°42
						</h3>
					</template>
				</SubHeader>
			`,
		}
	},
}

export const SlotSubTitle: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'additional-informations', 'back-btn', 'back-btn-icon', 'title', 'right-content'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
					>
						<template #sub-title>
							<h4 class="title mt-1">
								Traité par Paul Dupont
							</h4>
						</template>
					</SubHeader>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'
				</script>
				`,
			},
		],
	},
	args: {
		'headingLevel': 2,
		'backBtnText': 'Retour',
		'hideBackBtn': false,
		'titleText': 'Paul Dupont',
		'subTitleText': '1 69 08 75 125 456 75',
		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		'loading': false,
		'sub-title': `<template #sub-title>
	<h4 class="title mt-1">
		Traité par Jean Lunel
	</h4>
</template>`,
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				return { args }
			},
			template: `
				<SubHeader v-bind="args">
					<template #sub-title>
						<h4 class="title mt-1">
							Traité par Jean Lunel
						</h4>
					</template>
				</SubHeader>
		`,
		}
	},
}

export const SlotRightContent: Story = {
	parameters: {
		a11y: {
			disable: true,
		},
		controls: { exclude: ['vuetifyOptions', 'dataListGroupItems', 'backBtnText', 'backBtnAccessibleName', 'hideBackBtn', 'titleText', 'titleAccessibleName', 'subTitleText', 'subTitleAccessibleName', 'loading', 'renderHtmlValue', 'renderFixedHeight', 'back', 'click:list-item', 'additional-informations', 'back-btn', 'back-btn-icon', 'title', 'sub-title'] },
		sourceCode: [
			{
				name: 'Template',
				code: `
				<template>
					<SubHeader
						title-text="Paul Dupont"
						sub-title-text="1 69 08 75 125 456 75"
						sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
					>
						<template #sub-title>
							<h4 class="title mt-1">
								Traité par Paul Dupont
							</h4>
						</template>
					</SubHeader>
				</template>
				`,
			},
			{
				name: 'Script',
				code: `
				<script setup lang="ts">
					import { SubHeader } from '@cnamts/synapse'

					import { mdiClose, mdiContentCopy } from '@mdi/js'
				</script>
				`,
			},
		],
	},
	args: {
		'headingLevel': 2,
		'backBtnText': 'Retour',
		'hideBackBtn': false,
		'titleText': 'Paul Dupont',
		'subTitleText': '1 69 08 75 125 456 75',
		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
		'loading': false,
		'right-content': `<template #right-content>
	<div class="d-flex flex-column align-start flex-grow-0 ml-auto mt-auto">
		<VBtn
			variant="text"
			color="white"
		>
			<VIcon class="mr-2">
				{{ cancelIcon }}
			</VIcon>
			Clore le dossier
		</VBtn>
		<VBtn
			variant="text"
			color="white"
		>
			<VIcon class="mr-2">
				{{ copyIcon }}
			</VIcon>
			Dupliquer le dossier
		</VBtn>
	</div>
</template>`,
	},
	render: (args) => {
		return {
			components: { SubHeader },
			setup() {
				const cancelIcon = ref(mdiClose)
				const copyIcon = ref(mdiContentCopy)

				return { args, cancelIcon, copyIcon }
			},
			template: `
				<SubHeader v-bind="args">
					<template #right-content>
						<div class="d-flex flex-column align-start flex-grow-0 ml-auto mt-auto">
							<VBtn
								variant="text"
								color="white"
							>
								<VIcon class="mr-2">
									{{ cancelIcon }}
								</VIcon>
								Clore le dossier
							</VBtn>
							<VBtn
								variant="text"
								color="white"
							>
								<VIcon class="mr-2">
									{{ copyIcon }}
								</VIcon>
								Dupliquer le dossier
							</VBtn>
						</div>
					</template>
				</SubHeader>
			`,
		}
	},
}