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

defineOptions({ name: 'ModalStory' })

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

<template>
  <Story title="Overlay/Modal">
    <Variant title="Simple">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showBase = true"
        >
          Ouvrir
        </button>
        <MalioModal v-model="showBase">
          <template #header>
            <h2 class="text-xl font-bold">Détails</h2>
          </template>
          <p>Contenu simple de la modal.</p>
        </MalioModal>
      </div>
    </Variant>

    <Variant title="Avec footer d'actions">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showForm = true"
        >
          Ouvrir le formulaire
        </button>
        <MalioModal v-model="showForm" modal-class="max-w-lg">
          <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>
            <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
          </template>
        </MalioModal>
      </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>
        <MalioModal 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 cette modal. Utilisez la croix.</p>
        </MalioModal>
      </div>
    </Variant>
  </Story>
</template>
