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

import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';

import { computed, reactive } from 'vue';

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

interface Props {
  formSchema?: EasyFlowFormSchema[];
  buttonText?: string;
  buttonLoading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  formSchema: () => [],
  buttonText: '更新密码',
  buttonLoading: false,
});

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

const [Form, formApi] = useEasyFlowForm(
  reactive({
    commonConfig: {
      // 所有表单项
      componentProps: {
        class: 'w-full',
      },
    },
    layout: 'vertical',
    schema: computed(() => props.formSchema),
    showDefaultActions: false,
  }),
);

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

defineExpose({
  getFormApi: () => formApi,
});
</script>
<template>
  <div class="mx-auto max-w-[360px] pt-12">
    <Form />
    <EasyFlowButton
      :loading="buttonLoading"
      type="submit"
      class="mx-auto mt-4 flex h-8 w-28 p-0"
      @click="handleSubmit"
    >
      {{ buttonText }}
    </EasyFlowButton>
  </div>
</template>
