<template>
  <Story title="Overlay/Drawer">
    <Variant title="Simple">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showSimple = true"
        >
          Ouvrir le drawer
        </button>
        <MalioDrawer v-model="showSimple" title="Détails">
          <p>Contenu simple du drawer.</p>
        </MalioDrawer>
      </div>
    </Variant>

    <Variant title="Avec formulaire">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showForm = true"
        >
          Ouvrir le formulaire
        </button>
        <MalioDrawer v-model="showForm" title="Nouveau contact">
          <div class="flex flex-col gap-4">
            <MalioInputText v-model="formNom" label="Nom" />
            <MalioInputText v-model="formPrenom" label="Prénom" />
            <MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
          </div>
        </MalioDrawer>
      </div>
    </Variant>

    <Variant title="Sans bouton fermer">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showNoClose = true"
        >
          Ouvrir (sans croix)
        </button>
        <MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
          <p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
        </MalioDrawer>
      </div>
    </Variant>

    <Variant title="Largeur personnalisée">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showWide = true"
        >
          Ouvrir (large)
        </button>
        <MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
          <p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
        </MalioDrawer>
      </div>
    </Variant>
  </Story>
</template>

<docs lang="md">
# MalioDrawer

Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.

## Props détaillées

| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `id` | `string` | auto-généré | Identifiant HTML du drawer |
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
| `title` | `string` | `''` | Titre affiché dans le header |
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |

## Comportement

- Le drawer s'ouvre en glissant depuis la droite avec une transition
- Un backdrop semi-transparent couvre le reste de la page
- Clic sur le backdrop ferme le drawer
- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
- Contenu scrollable si plus haut que la fenêtre
- Teleport vers `<body>` pour éviter les problèmes de z-index

## Accessibilité

- `role="dialog"` et `aria-modal="true"` sur le panneau
- `aria-labelledby` lié au titre
- Bouton fermer avec `aria-label="Fermer"`

## Events

| Event | Payload | Description |
|-------|---------|-------------|
| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |

## Slots

| Slot | Description |
|------|-------------|
| `default` | Contenu du drawer |
</docs>

<script setup lang="ts">
import { ref } from 'vue'
import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
import MalioInputText from '../../components/malio/input/InputText.vue'
import MalioButton from '../../components/malio/button/Button.vue'

defineOptions({ name: 'DrawerStory' })

const showSimple = ref(false)
const showForm = ref(false)
const showNoClose = ref(false)
const showWide = ref(false)

const formNom = ref('Dupont')
const formPrenom = ref('Jean')
</script>
