<script lang="ts" setup>
import type { EasyFlowFormSchema } from '@easyflow/common-ui';
import type { Recordable } from '@easyflow/types';

import { computed, ref } from 'vue';

import { AuthenticationForgetPassword, z } from '@easyflow/common-ui';
import { $t } from '@easyflow/locales';

defineOptions({ name: 'ForgetPassword' });

const loading = ref(false);

const formSchema = computed((): EasyFlowFormSchema[] => {
  return [
    {
      component: 'EasyFlowInput',
      componentProps: {
        placeholder: 'example@example.com',
      },
      fieldName: 'email',
      label: $t('authentication.email'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.emailTip') })
        .email($t('authentication.emailValidErrorTip')),
    },
  ];
});

function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
}
</script>

<template>
  <AuthenticationForgetPassword
    :form-schema="formSchema"
    :loading="loading"
    @submit="handleSubmit"
  />
</template>
