<script setup lang="ts">
import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui'
import { useForm } from '@inertiajs/vue3'
import * as v from 'valibot'
import { computed } from 'vue'
import { useAuth } from '@/composables/useAuth'
import AuthLayout from '@/layouts/AuthLayout.vue'

const { config, flash } = useAuth()

const form = useForm('ForgotPasswordForm', {
  email: '',
})

const fields: AuthFormField[] = [
  {
    name: 'email',
    type: 'email',
    label: 'Email',
    placeholder: 'Enter your email',
    required: true,
  },
]

const schema = v.object({
  email: v.pipe(v.string('Email is required'), v.nonEmpty('Email is required'), v.email('Please enter a valid email')),
})

type Schema = v.InferOutput<typeof schema>

function onSubmit(event: FormSubmitEvent<Schema>) {
  form.email = event.data.email
  form.post('/forgot-password')
}

const hasErrors = computed(() => Object.keys(form.errors).length > 0)
const firstError = computed(() => Object.values(form.errors)[0])
</script>

<template>
  <AuthLayout>
    <UAuthForm
      :schema="schema"
      :fields="fields"
      :submit="{ label: config.forgotPassword.submit_label, loading: form.processing }"
      :disabled="form.processing"
      :ui="{ header: 'hidden' }"
      @submit="onSubmit"
    >
      <template v-if="hasErrors || flash.status" #validation>
        <UAlert
          v-if="hasErrors"
          color="error"
          icon="i-lucide-alert-circle"
          :title="firstError"
        />
        <UAlert
          v-if="flash.status"
          color="success"
          icon="i-lucide-check-circle"
          :title="flash.status"
        />
      </template>

      <template #footer>
        <span class="text-muted">
          Remember your password?
          <ULink to="/login" class="text-primary font-medium">
            Sign in
          </ULink>
        </span>
      </template>
    </UAuthForm>
  </AuthLayout>
</template>
