<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioInputPassword />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputPassword
        v-model="passwordValue"
        label="Mot de passe"
        name="password"
        autocomplete="current-password"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
      <MalioInputPassword
        label="Mot de passe"
        :display-icon="false"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputPassword
        model-value="motdepasse123"
        disabled
        label="Mot de passe"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputPassword
        model-value="lectureseule"
        readonly
        label="Mot de passe"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
      <MalioInputPassword
        label="Mot de passe (readonly vide)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
      <MalioInputPassword
        v-model="readonlyFilledPassword"
        label="Mot de passe (readonly rempli)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputPassword
        label="Mot de passe"
        hint="8 caractères minimum"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputPassword
        model-value="abc"
        label="Mot de passe"
        error="Le mot de passe est trop court"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputPassword
        model-value="motdepasse123"
        label="Mot de passe"
        success="Mot de passe valide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
      <MalioInputPassword
        v-model="dynamicPassword"
        label="Mot de passe"
        hint="8 caractères minimum, 1 majuscule, 1 chiffre"
        :error="dynamicError"
        :success="dynamicSuccess"
      />
    </div>
  </div>
</template>

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

const readonlyFilledPassword = ref('motdepasse123')
const passwordValue = ref('')
const dynamicPassword = ref('')

const passwordRegex = /^(?=.*[A-Z])(?=.*\d).{8,}$/
const isDynamicValid = computed(() => passwordRegex.test(dynamicPassword.value))
const dynamicError = computed(() => {
  if (!dynamicPassword.value) return ''
  return isDynamicValid.value ? '' : 'Mot de passe invalide'
})
const dynamicSuccess = computed(() => {
  if (!dynamicPassword.value) return ''
  return isDynamicValid.value ? 'Mot de passe valide' : ''
})
</script>
