import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
import '../../../stories/styles/shared.css';
import * as HeaderBurgerMenuStories from "./HeaderBurgerMenu.stories";

<Meta of={HeaderBurgerMenuStories} />

<div className="header">
  <h1>HeaderBurgerMenu</h1>
  <p>L'utilisation de ce menu est à privilégier pour les application à destination du publique ou pour créer des menus contenant plus de six éléments.</p>
</div>

## Utilisation

Ce menu est prévu pour être utilisé dans le composant `HeaderBar` via le slot `menu` de ce composant.

<Source
  dark
  code={`
<template>
  <HeaderBar>
	<template #menu>
	  <HeaderBurgerMenu>
		menu content
	  </HeaderBurgerMenu>
	</template>
  </HeaderBar>
</template>
`}
/>

Ce menu s'utilise conjointement avec les composants `HeaderMenuSection` et `HeaderMenuItem` pour structurer le menu.

Un composant `HeaderMenuSection` peut contenir plusieurs `HeaderMenuItem`.

Un Composant `HeaderMenuItem` doit obligatoirement être contenu dans un `HeaderMenuSection`.

<Canvas of={HeaderBurgerMenuStories.Default} />

## API

<Controls of={HeaderBurgerMenuStories.Default} />

## Menu à un seul niveau

Le menu peut être utilisé avec un seul niveau de profondeur.

<Canvas
	of={HeaderBurgerMenuStories.WithAnItem}
	source={{
language: 'html',
format: 'dedent',
code:`
<HeaderBar>
	<template #menu>
		<HeaderBurgerMenu>
			<HeaderMenuSection>
				<HeaderMenuItem>
					<a href="/">Item 1</a>
				</HeaderMenuItem>
			</HeaderMenuSection>
		</HeaderBurgerMenu>
	</template>
</HeaderBar>
	`}}
/>

Il est possible d'utiliser des liens de navigation avec les composants `RouterLink` ou `NuxtLink`.

<Source
  dark
  code={`
      <script setup lang="ts">
      import { HeaderBar, HeaderBurgerMenu, HeaderMenuSection, HeaderMenuItem } from '@cnamts/synapse'
      </script>

      <template>
		<HeaderBar>
			<template #menu>
				<HeaderBurgerMenu>
					<HeaderMenuSection>
						<HeaderMenuItem>
							<a href="/">Home</a>
						</HeaderMenuItem>
						<HeaderMenuItem>
							<a href="/about">About</a>
						</HeaderMenuItem>
						<HeaderMenuItem>
							<RouterLink to="/services">Services</RouterLink>
						</HeaderMenuItem>
						<HeaderMenuItem>
							<NuxtLink to="/contact">Contact</NuxtLink>
						</HeaderMenuItem>
					</HeaderMenuSection>
				</HeaderBurgerMenu>
			</template>
		</HeaderBar>
      </template>
            `}
      />

## Menu à plusieurs niveaux

Vous pouvez également constituer votre menu avec plusieurs niveaux de profondeur. Dans ce cas là, il convient d'utiliser le composant `HeaderSubMenu` pour définir les sous-menus.

Pour conserver la logique sémantique du menu, le composant `HeaderSubMenu` doit être contenu dans un `HeaderMenuItem`.

<Canvas
	of={HeaderBurgerMenuStories.Populated}
	source={{
language: 'html',
code:`
<HeaderBar>
	<template #menu>
		<HeaderMenu>
			<HeaderMenuSection >
				<template #title>
					Section 1
				</template>
				<HeaderMenuItem>
					<a>Item 1</a>
				</HeaderMenuItem>
				<HeaderMenuItem>
					<a>Item 2</a>
				</HeaderMenuItem>
				<headerMenuItem>
					<HeaderSubMenu>
						<template #title>
							Menu de premier niveau 1
						</template>
						<HeaderMenuSection>
							<template #title>
								Section 1
							</template>
							<HeaderMenuItem>
								<a>Item</a>
							</HeaderMenuItem>
							<HeaderSubMenu>
								<template #title>
									Menu de deuxième niveau 1
								</template>
								<HeaderMenuItem>
									<a>Item</a>
								</HeaderMenuItem>
							</HeaderSubMenu>
						</HeaderMenuSection>
					</HeaderSubMenu>
				</headerMenuItem>
			</HeaderMenuSection>
			<HeaderMenuSection>
				<template #title>
					Section 2
				</template>
				<headerMenuItem>
					<HeaderSubMenu>
						<template #title>
							Menu de premier niveau 2
						</template>
						<HeaderMenuItem>
							<a>Item 1</a>
						</HeaderMenuItem>
						<HeaderMenuItem>
							<HeaderSubMenu>
								<template #title>
									Menu de deuxième niveau 2
								</template>
								<HeaderMenuItem>
									<a>Item 1</a>
								</HeaderMenuItem>
							</HeaderSubMenu>
						</HeaderMenuItem>
						<HeaderMenuItem>
							<HeaderSubMenu>
								<template #title>
									Menu de deuxième niveau 3
								</template>
								<HeaderMenuSection>
									<template #title>
										Section 1
									</template>
									<HeaderMenuItem>
										<a>Item 1</a>
									</HeaderMenuItem>
								</HeaderMenuSection>
							</HeaderSubMenu>
						</HeaderMenuItem>
					</HeaderSubMenu>
				</headerMenuItem>
				<HeaderMenuItem>
					<a>Item 3</a>
				</HeaderMenuItem>
			</HeaderMenuSection>
			<div class="pa-4">
				<p class="font-weight-bold">Veillez vous connecter</p>
				<VBtn variant="tonal" class="mt-4 font-weight-medium" color="primary">Je me connecte</VBtn>
			</div>
		</HeaderMenu>
	</template>
</HeaderBar>
	`}}
/>

## Construire un menu de façon dynamique

Voici un exemple de menu construit de façon dynamique.

<Canvas
	of={HeaderBurgerMenuStories.Generated}
	story={{
		height: '500px',
	}}
	source={{
language: 'html',
format: 'dedent',
code:`
<script setup lang="ts">
	import { HeaderBar, HeaderBurgerMenu, HeaderMenuSection, HeaderMenuItem, HeaderSubMenu } from '@cnamts/synapse'
	import { mdiMapMarker } from '@mdi/js'

	const marker = mdiMapMarker

	const menu = [
		{
			title: 'Vous informer',
			items: [
				{ title: 'Actualités', href: 'https://www.ameli.fr/assure/actualites' },
				{
					subMenuTitle: 'Droits et démarches',
					subMenuSubtitle: 'selon votre situation',
					sections: [
						{
							title: undefined,
							items: [
								{ title: 'Les essentiels de l\'assuré', href: 'https://www.ameli.fr/assure/droits-demarches/principes' },
								{ title: 'Parentalité, couple', href: 'https://www.ameli.fr/assure/droits-demarches/famille' },
								{ title: 'Fin de vie, deuil', href: 'https://www.ameli.fr/assure/droits-demarches/fin-de-vie-deuil' },
								{ title: 'Etudes et stages', href: 'https://www.ameli.fr/assure/droits-demarches/etudes-stages' },
								{ title: 'Vie professionnelle, retraite', href: 'https://www.ameli.fr/assure/droits-demarches/vie-professionnelle-retraite' },
								{ title: 'Difficultés d\'accès aux droits et aux soins', href: 'https://www.ameli.fr/assure/droits-demarches/difficultes-acces-droits-soins' },
								{ title: 'Maladie, accident, hospitalisation', href: 'https://www.ameli.fr/assure/droits-demarches/maladie-accident-hospitalisation' },
								{ title: 'invalidité, handicap', href: 'https://www.ameli.fr/assure/droits-demarches/invalidite-handicap' },
								{ title: 'situations particulières', href: 'https://www.ameli.fr/assure/droits-demarches/situations-particulieres' },
								{ title: 'réclamation, médiation, recours', href: 'https://www.ameli.fr/assure/droits-demarches/reclamation-mediation-voies-de-recours' },
								{ title: 'Europe, international', href: 'https://www.ameli.fr/assure/droits-demarches/europe-international' },
							],
						},
					],
				},
				{
					subMenuTitle: 'Remboursements',
					subMenuSubtitle: 'prestations et aides',
					sections: [
						{
							title: undefined,
							items: [
								{ title: 'Ce qui est remboursé', href: 'https://www.ameli.fr/assure/remboursements/rembourse' },
								{ title: 'ce qui reste à votre charge', href: 'https://www.ameli.fr/assure/remboursements/reste-charge' },
								{ title: 'Être bien remboursé', href: 'https://www.ameli.fr/assure/remboursements/etre-bien-rembourse' },
								{ title: 'Indemnités journalières maladie, maternité, paternité', href: 'https://www.ameli.fr/assure/remboursements/indemnites-journalieres-maladie-maternite-paternite' },
								{ title: 'Accident du travail : prise en charge et indemnités journalières', href: 'https://www.ameli.fr/assure/remboursements/accident-travail' },
								{ title: 'Maladie professionnelle : prise en charge et indemnités journalières', href: 'https://www.ameli.fr/assure/remboursements/maladie-professionnelle' },
								{ title: 'Pensions, allocations et rentes', href: 'https://www.ameli.fr/assure/remboursements/pensions-allocations-rentes' },
								{ title: 'Incapacité permanente', href: 'https://www.ameli.fr/assure/remboursements/incapacite-permanente' },
								{ title: 'Complémentaire santé solidaire : vous n\'avez rien à payer dans la plupart des cas ', href: 'https://www.ameli.fr/assure/remboursements/cmu-aides-financieres/complementaire-sante-solidaire' },
								{ title: 'Aide médicale de l\'État et soins urgents', href: 'https://www.ameli.fr/assure/remboursements/aide-medicale-etat-soins-urgents' },
								{ title: 'Compte ameli, mode d\'emploi', href: 'https://www.ameli.fr/assure/remboursements/suivre-remboursements' },
							],
						},
					],
				},
				{
					subMenuTitle: 'Maladies et prévention',
					sections: [
						{
							title: undefined,
							items: [
								{ title: 'Tous les thèmes de santé', href: 'https://www.ameli.fr/assure/sante/themes' },
								{ title: 'L\'Assurance Maladie vous accompagne', href: 'https://www.ameli.fr/assure/remboursements/reste-charge' },
								{ title: 'Mon espace santé', href: 'https://www.ameli.fr/assure/sante/mon-espace-sante' },
								{ title: 'Mon bilan prévention', href: 'https://www.ameli.fr/assure/sante/mon-bilan-prevention' },
								{ title: 'Réagir en cas d\'urgence ', href: 'https://www.ameli.fr/assure/sante/urgence' },
								{ title: 'Accomplir les bons gestes ', href: 'https://www.ameli.fr/assure/sante/bons-gestes' },
								{ title: 'Médicaments et vaccins', href: 'https://www.ameli.fr/assure/sante/medicaments' },
								{ title: 'Déroulement d\'un examen', href: 'https://www.ameli.fr/assure/sante/examen' },
								{ title: 'Certificat médical : dans quels cas et pour qui est-il obligatoire ?', href: 'https://www.ameli.fr/assure/sante/certificat-medical-quand-et-pour-qui' },
								{ title: 'Devenir parent', href: 'https://www.ameli.fr/assure/sante/devenir-parent' },
								{ title: 'Enfants', href: 'https://www.ameli.fr/assure/sante/enfants' },
								{ title: 'Jeunes 16-25 ans', href: 'https://www.ameli.fr/assure/sante/jeunes-16-25-ans' },
								{ title: 'Seniors', href: 'https://www.ameli.fr/assure/sante/seniors' },
								{ title: 'Télésanté, la santé à distance', href: 'https://www.ameli.fr/assure/sante/telesante' },
							],
						},
					],
				},
			],
		},
		{
			title: 'Besoin d\'aide',
			items: [
				{
					title: 'Contacter l\'Assurance Maladie',
					subtitle: 'obtenir une attestation, envoyer une feuille de soins, contacter sa caisse, etc.',
					href: 'https://www.ameli.fr/assure/adresses-contacts',
				},
				{
					title: 'Trouver un professionnel de santé',
					subtitle: 'médecins, infirmiers...',
					href: 'https://www.ameli.fr/assure/adresses-contacts',
				},
				{
					title: 'Télécharger un formulaire (ex: cerfa)
',
					href: 'https://www.ameli.fr/assure/droits-demarches/formulaires',
				},
				{
					title: 'Consulter le forum',
					href: 'https://forum-assures.ameli.fr/',
				},
				{
					title: 'Sourds et malentendants',
					href: 'https://elioz.fr/elioz-connect/annuaire/assurance-maladie-annuaire/',
				},
			],
		},
	]
</script>

<template>
	<HeaderBar>
		<template #menu>
			<HeaderBurgerMenu>
				<HeaderMenuSection
					v-for="section in menu"
					:key="section.title"
					:title="section.title"
				>
					<HeaderMenuItem
						v-for="item in section.items"
						:key="item.title"
					>
						<HeaderSubMenu v-if="'subMenuTitle' in item">
							<template #title>
								{{ item.subMenuTitle }}
								<em
									v-if="item?.subMenuSubtitle"
									style="font-style: normal; color: #757777;"
								>{{ item.subMenuSubtitle }}</em>
							</template>
							<HeaderMenuSection
								v-for="subSection in item.sections"
								:key="subSection.title"
								:title="subSection.title"
							>
								<HeaderMenuItem
									v-for="subItem in subSection.items"
									:key="subItem.title"
								>
									<a :href="subItem.href">{{ subItem.title }}</a>
								</HeaderMenuItem>
							</HeaderMenuSection>
						</HeaderSubMenu>
						<a
							v-else
							:href="item.href"
						>
							{{ item.title }}
							<em
								v-if="'subtitle' in item"
								style="font-style: normal; color: #757777;"
							>{{ item.subtitle }}</em>
						</a>
					</HeaderMenuItem>
				</HeaderMenuSection>
				<h2
					class="border-b-sm mb-2"
					style="font-size: 1.1rem; padding: 40px 16px 8px 20px;"
				>
					Votre caisse
				</h2>
				<div style="padding: 16px 50px 16px 20px;">
					<div class="d-flex align-center ga-2 font-weight-bold">
						<VIcon
							aria-label="Localisation"
							role="img"
							aria-hidden="false"
							color="primary"
						>
							{{ marker }}
						</VIcon>
						<p>Vous n'avez pas sélectionné votre caisse</p>
</div>
					<VBtn
						class="mt-3 mb-4 font-weight-bold text-capitalize"
						base-color="primary"
						density="comfortable"
						flat
						height="37"
					>
						Sélectionner
					</VBtn>
					<p class="mb-8">
						Les pages d'ameli seront alors enrichies des informations locales de votre caisse (contacts, événements régionaux, etc.)
					</p>
</div>
			</HeaderBurgerMenu>
		</template>
	</HeaderBar>
</template>

`}}
/>

## Gérer la navigation avec un RouterLink

Si vous positionnez le composant dans un layout ou à la racine de votre application et que vous utilisez un routeur pour gérer la navigation, le menu ne se fermera pas automatiquement lors de la navigation.

Si vous souhaitez que le menu se ferme lors de la navigation, vous pouvez utiliser le `v-model` par défaut pour gérer l'état du menu.

<Source
	dark
	language="typescript"
	format="dedent"
	code={`
		const menuOpen = ref(false)
		const curRoute = useRoute()
		watch(curRoute, () => {
			menuOpen.value = false
		})
		`}
/>