<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchemas, FormFieldsEnum } from './config';
  import { ref } from 'vue';

  interface SaveParamsType {
    name: string;
    additional: { description: string };
  }

  const visible = ref(false);

  const [register, { closeModal }] = useModalInner();

  const [registerForm, { getFieldsValue, validate }] = useForm({
    schemas: formSchemas,
    showActionButtonGroup: false,
    layout: 'vertical',
  });

  let resolveFn: undefined | ((value: SaveParamsType) => any);

  const openCreateRuleChainModal = async (): Promise<{
    name: string;
    additionalInfo: { description: string };
  }> => {
    visible.value = true;
    return new Promise((resolve) => {
      resolveFn = resolve;
    });
  };

  const handleSave = async () => {
    await validate();
    const value = getFieldsValue();
    resolveFn?.({
      name: value[FormFieldsEnum.NAME],
      additional: { description: value[FormFieldsEnum.DESCRIPTION] || '' },
    });
    closeModal();
  };

  defineExpose({ openCreateRuleChainModal });
</script>

<template>
  <BasicModal
    v-model:visible="visible"
    @register="register"
    @ok="handleSave"
    title="Create nested rule chain"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>