<script lang="ts" setup>
  import { unref } from 'vue';
  import { EdgeBindDataFieldEnum, EdgeBindDataFieldNameEnum } from '../../../enum/node';
  import { ConnectionModalDefineExposeType } from '../../../types';
  import { NodeData } from '../../../types/node';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';

  defineProps<{
    config: NodeData;
  }>();

  const getSchemas = (options: string[] = []): FormSchema[] => {
    return [
      {
        field: EdgeBindDataFieldEnum.TYPE,
        component: 'Select',
        label: EdgeBindDataFieldNameEnum.TYPE,
        componentProps: {
          getPopupContainer: () => document.body,
          options: unref(options).map((item) => ({ label: item, value: item })),
          mode: 'multiple',
          placeholder: '请选择链接标签',
        },
      },
    ];
  };

  const [register, { updateSchema, setFieldsValue, getFieldsValue }] = useForm({
    showActionButtonGroup: false,
    schemas: getSchemas(),
  });

  const getValue: ConnectionModalDefineExposeType['getFieldsValue'] = async () => {
    return getFieldsValue();
  };

  const setValue: ConnectionModalDefineExposeType['setFieldsValue'] = async (value, nodeData) => {
    const { type } = value || {};
    const relationTypes =
      unref(nodeData)?.config?.configurationDescriptor.nodeDefinition.relationTypes;
    await updateSchema(getSchemas(relationTypes));
    setFieldsValue(type);
  };

  defineExpose({
    getFieldsValue: getValue,
    setFieldsValue: setValue,
  } as ConnectionModalDefineExposeType);
</script>

<template>
  <BasicForm @register="register" />
</template>