<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 { RelationsQuery } from '/@/views/rule/designer/src/components/RelationsQuery';
  import { ref, unref } from 'vue';
  import { AttributeConfiguration } from '/@/views/rule/designer/src/components/AttributeConfiguration';
  import { RelatedAttributesFieldsEnum } from '../../../enum/formField/enrichment';

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

  const relationsQueryElRef = ref<Nullable<InstanceType<typeof RelationsQuery>>>();

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

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

  const getValue: CreateModalDefineExposeType['getFieldsValue'] = async () => {
    await validate();
    await unref(relationsQueryElRef)?.validate();
    await unref(attributeControlElRef)?.validate();
    const value = getFieldsValue() || {};
    const queryValue = unref(relationsQueryElRef)?.getFieldsValue();
    const attrMapping = unref(attributeControlElRef)?.getFieldsValue();
    return {
      ...value,
      [RelatedAttributesFieldsEnum.RELATIONS_QUERY]: queryValue,
      [RelatedAttributesFieldsEnum.ATTR_MAPPING]: attrMapping,
    };
  };

  const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
    resetFields();
    setFieldsValue(value);
    unref(relationsQueryElRef)?.setFieldsValue(
      value?.[RelatedAttributesFieldsEnum.RELATIONS_QUERY] as Recordable
    );
    unref(attributeControlElRef)?.setFieldsValue(value?.[RelatedAttributesFieldsEnum.ATTR_MAPPING]);
  };

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

<template>
  <BasicForm @register="register">
    <template #relationsQuery="{ field, model }">
      <RelationsQuery ref="relationsQueryElRef" v-model:value="model[field]" />
    </template>
    <template #attrMapping="{ field, model }">
      <AttributeConfiguration
        v-model:value="model[field]"
        ref="attributeControlElRef"
        :keyLabel="`Source ${
          model[RelatedAttributesFieldsEnum.TELEMETRY] ? 'telemetry' : 'attribute'
        }`"
        valueLabel="Target attribute"
      >
        <template #afterForm>
          <div class="text-xs text-gray-500">
            Hint: use
            <code>
              <span class="text-dark-500">${</span>
              metadataKey
              <span class="text-dark-500">}</span>
            </code>
            for value from metadata,
            <code>
              <span class="text-dark-500"> $[</span>
              messageKey
              <span class="text-dark-500">] </span>
            </code>
            for value from message body to substitute "Source" and "Target" key names
          </div>
        </template>
      </AttributeConfiguration>
    </template>
  </BasicForm>
</template>