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

defineOptions({ name: 'DrawerStory' })

const showRight = ref(false)
const showLeft = ref(false)
const showForm = ref(false)
const showNoDismiss = ref(false)
</script>

<template>
  <Story title="Overlay/Drawer">
    <Variant title="Droite (défaut)">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showRight = true"
        >
          Ouvrir à droite
        </button>
        <MalioDrawer v-model="showRight">
          <template #header>
            <h2 class="text-xl font-bold">Détails</h2>
          </template>
          <p>Contenu simple du drawer.</p>
        </MalioDrawer>
      </div>
    </Variant>

    <Variant title="Gauche">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showLeft = true"
        >
          Ouvrir à gauche
        </button>
        <MalioDrawer v-model="showLeft" side="left">
          <template #header>
            <h2 class="text-xl font-bold">Navigation</h2>
          </template>
          <p>Ce drawer glisse depuis la gauche.</p>
        </MalioDrawer>
      </div>
    </Variant>

    <Variant title="Avec footer collant">
      <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">
          <template #header>
            <h2 class="text-xl font-bold">Nouveau contact</h2>
          </template>
          <div class="flex flex-col gap-4 py-2">
            <MalioInputText label="Nom" />
            <MalioInputText label="Prénom" />
          </div>
          <template #footer>
            <div class="sticky bottom-0 flex gap-3 bg-white py-4">
              <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
            </div>
          </template>
        </MalioDrawer>
      </div>
    </Variant>

    <Variant title="Non dismissable">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showNoDismiss = true"
        >
          Ouvrir
        </button>
        <MalioDrawer v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
          <template #header>
            <h2 class="text-xl font-bold">Action requise</h2>
          </template>
          <p>Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
        </MalioDrawer>
      </div>
    </Variant>
  </Story>
</template>
