<script lang="ts" setup>
  import type { CreateModalDefineExposeType } from '../../../types';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchemas } from './create.config';
  import { NodeData } from '../../../types/node';
  import { AttributeConfiguration } from '/@/views/rule/designer/src/components/AttributeConfiguration';
  import { ref, unref } from 'vue';
  import { GcpPubsubFieldsEnum } from '../../../enum/formField/external';
  import { FileItemType } from '../../../src/components/CredentialsCard/config';

  const attributeConfigurationElRef = ref<Nullable<InstanceType<typeof AttributeConfiguration>>>();

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

  const [register, { validate, getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: formSchemas,
    showActionButtonGroup: false,
  });

  const getValue: CreateModalDefineExposeType['getFieldsValue'] = async () => {
    await validate();
    await unref(attributeConfigurationElRef)?.validate();
    const value = getFieldsValue() || {};
    const messageAttribute = unref(attributeConfigurationElRef)?.getFieldsValue();
    return {
      ...value,
      [GcpPubsubFieldsEnum.MESSAGE_ATTRIBUTES]: messageAttribute,
      [GcpPubsubFieldsEnum.SERVICE_ACCOUNT_KEY]:
        value?.[GcpPubsubFieldsEnum.SERVICE_ACCOUNT_KEY]?.[0]?.data || null,
    };
  };

  const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
    resetFields();

    const file = value?.[GcpPubsubFieldsEnum.SERVICE_ACCOUNT_KEY]
      ? [
          {
            uid: Date.now().toString(),
            data: value[GcpPubsubFieldsEnum.SERVICE_ACCOUNT_KEY],
            name: value[GcpPubsubFieldsEnum.SERVICE_ACCOUNT_KEY_FILE_NAME],
          } as FileItemType,
        ]
      : [];
    setFieldsValue({
      ...value,
      [GcpPubsubFieldsEnum.SERVICE_ACCOUNT_KEY]: file,
    });
    unref(attributeConfigurationElRef)?.setFieldsValue(
      value?.[GcpPubsubFieldsEnum.MESSAGE_ATTRIBUTES]
    );
  };

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

<template>
  <BasicForm @register="register">
    <template #messageAttributes="{ field, model }">
      <AttributeConfiguration
        ref="attributeConfigurationElRef"
        v-model:value="model[field]"
        keyLabel="Name"
        valueLabel="Value"
        :allowEmpty="true"
      />
    </template>
  </BasicForm>
</template>