<script setup lang="ts">
import { ref } from 'vue'

const drawerRight = ref(false)
const drawerLeft = ref(false)
const drawerForm = ref(false)
const drawerFixedFooter = ref(false)
const drawerNoDismiss = ref(false)
</script>

<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Drawer droite (défaut)</h2>
      <MalioButton label="Ouvrir à droite" @click="drawerRight = true" />
      <MalioDrawer v-model="drawerRight">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Détails</h2>
        </template>
        <p class="text-m-text">Contenu du drawer. Échap, clic backdrop et croix le ferment.</p>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Drawer gauche</h2>
      <MalioButton label="Ouvrir à gauche" variant="secondary" @click="drawerLeft = true" />
      <MalioDrawer v-model="drawerLeft" side="left">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Navigation</h2>
        </template>
        <p class="text-m-text">Ce drawer glisse depuis la gauche.</p>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
      <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
      <MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
        </template>
        <div class="flex flex-col gap-4 py-2">
          <MalioInputText label="Nom" />
          <MalioInputText label="Prénom" />
          <MalioInputText label="Email" />
        </div>
        <template #footer>
          <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
          <MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
        </template>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Footer fixe avec contenu long</h2>
      <MalioButton label="Ouvrir (contenu long)" variant="tertiary" @click="drawerFixedFooter = true" />
      <MalioDrawer v-model="drawerFixedFooter">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Conditions</h2>
        </template>
        <!-- Pas de hack : le footer est hors zone scrollable, seul le body défile -->
        <div class="flex flex-col gap-4">
          <p v-for="n in 12" :key="n" class="text-m-text">
            Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que seul le body défile, le footer restant fixé en bas.
          </p>
        </div>
        <template #footer>
          <MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
        </template>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
      <MalioButton label="Ouvrir" variant="danger" @click="drawerNoDismiss = true" />
      <MalioDrawer v-model="drawerNoDismiss" :dismissable="false" :close-on-escape="false">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Action requise</h2>
        </template>
        <p class="text-m-text">Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
      </MalioDrawer>
    </div>
  </div>
</template>
