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

import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@easyflow/locales';

import { useEasyFlowForm } from '@easyflow-core/form-ui';
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';

import Title from './auth-title.vue';

interface Props {
  formSchema: EasyFlowFormSchema[];
  /**
   * @zh_CN 是否处于加载处理状态
   */
  loading?: boolean;
  /**
   * @zh_CN 登录路径
   */
  loginPath?: string;
  /**
   * @zh_CN 标题
   */
  title?: string;
  /**
   * @zh_CN 描述
   */
  subTitle?: string;
  /**
   * @zh_CN 按钮文本
   */
  submitButtonText?: string;
}

defineOptions({
  name: 'ForgetPassword',
});

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  loginPath: '/auth/login',
  submitButtonText: '',
  subTitle: '',
  title: '',
});

const emit = defineEmits<{
  submit: [Record<string, any>];
}>();

const [Form, formApi] = useEasyFlowForm(
  reactive({
    commonConfig: {
      hideLabel: true,
      hideRequiredMark: true,
    },
    schema: computed(() => props.formSchema),
    showDefaultActions: false,
  }),
);

const router = useRouter();

async function handleSubmit() {
  const { valid } = await formApi.validate();
  const values = await formApi.getValues();
  if (valid) {
    emit('submit', values);
  }
}

function goToLogin() {
  router.push(props.loginPath);
}

defineExpose({
  getFormApi: () => formApi,
});
</script>

<template>
  <div class="auth-forget-password">
    <Title>
      <slot name="title">
        {{ title || $t('authentication.forgetPassword') }}
      </slot>
      <template #desc>
        <slot name="subTitle">
          {{ subTitle || $t('authentication.forgetPasswordSubtitle') }}
        </slot>
      </template>
    </Title>
    <div class="auth-form-group">
      <Form />
    </div>

    <div>
      <EasyFlowButton
        :class="{
          'cursor-wait': loading,
        }"
        aria-label="submit"
        class="mt-6 h-11 w-full rounded-xl text-base font-medium"
        @click="handleSubmit"
      >
        <slot name="submitButtonText">
          {{ submitButtonText || $t('authentication.sendResetLink') }}
        </slot>
      </EasyFlowButton>
      <EasyFlowButton
        class="mt-3 h-11 w-full rounded-xl"
        variant="outline"
        @click="goToLogin()"
      >
        {{ $t('common.back') }}
      </EasyFlowButton>
    </div>
  </div>
</template>

<style scoped>
.auth-form-group :deep(.easyflow-form-ui + .easyflow-form-ui) {
  margin-top: 0.95rem;
}
</style>
