<script lang="ts" setup>
  import { nextTick, ref, unref, computed } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { FormFieldsEnum, formSchema } from './config';
  import { HandleOperationEnum, HandleOperationNameEnum } from '../../config';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { createOrEditEdgeInstance } from '/@/api/edgeManage/edgeInstance';
  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
  import { buildUUID, randomString } from '/@/utils/uuid';
  import { handeleCopy } from '/@/views/device/profiles/step/topic';
  import { useI18n } from '/@/hooks/web/useI18n';

  const emits = defineEmits(['success', 'register']);

  const { createMessage } = useMessage();

  const isUpdate = ref<Boolean>();

  const isUpdateText = ref<String>();

  const recordData = ref<EdgeInstanceItemType>();

  const { t } = useI18n();

  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas: formSchema,
    showActionButtonGroup: false,
  });

  const cacheTitle = computed(() =>
    !unref(isUpdate) ? t('edge.instance.action.create') : t('edge.instance.action.edit')
  );

  const handleCopyRoutingKey = (text: string) => handeleCopy(text);

  const handleCopySecret = (text: string) => handeleCopy(text);

  const setDefaultValue = (event: HandleOperationEnum) => {
    if (event === HandleOperationEnum.CREATE) {
      setFieldsValue({
        [FormFieldsEnum.ROUTINGKEY]: buildUUID(),
        [FormFieldsEnum.SECRET]: randomString(),
      });
    }
  };

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true });
    await resetFields();
    setDefaultValue(data.event);
    isUpdate.value = data.isUpdate;
    isUpdateText.value = data.isUpdateText;
    recordData.value = data.record;
    try {
      await nextTick();
      setFieldsValue(data.record);
      setFieldsValue({
        [FormFieldsEnum.DESCRIPTION]: data.record?.additionalInfo[FormFieldsEnum.DESCRIPTION],
      });
    } finally {
      setDrawerProps({ loading: false });
    }
  });

  const getValue = async () => {
    const values = await validate();
    if (!values) return;
    const additionalInfo = {
      description: values[FormFieldsEnum.DESCRIPTION],
    };
    const mergeValues = {
      ...recordData.value,
      ...values,
      ...{ additionalInfo },
    };
    Reflect.deleteProperty(mergeValues, FormFieldsEnum.DESCRIPTION);
    await createOrEditEdgeInstance(mergeValues);
    createMessage.success(
      unref(isUpdateText) === HandleOperationNameEnum.CREATE
        ? t('common.createSuccessText')
        : t('common.editText') + t('common.successText')
    );
    closeDrawer();
    setTimeout(() => {
      emits('success');
    }, 500);
  };

  const handleSubmit = () => getValue();
</script>

<template>
  <div>
    <BasicDrawer
      destroyOnClose
      v-bind="$attrs"
      showFooter
      :title="cacheTitle"
      width="30%"
      :maskClosable="true"
      @register="registerDrawer"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #routingKey="{ model, field }">
          <div class="!flex justify-between items-center gap-5">
            <a-input disabled v-model:value="model[field]" />
            <a-button
              type="link"
              @click="handleCopyRoutingKey(model[field])"
              class="cursor-pointer"
            >
              {{ t('edge.instance.action.copy') }}
            </a-button>
          </div>
        </template>
        <template #secret="{ model, field }">
          <div class="!flex justify-between items-center gap-5">
            <a-input disabled v-model:value="model[field]" />
            <a-button type="link" @click="handleCopySecret(model[field])" class="cursor-pointer">
              {{ t('edge.instance.action.copy') }}
            </a-button>
          </div>
        </template>
      </BasicForm>
    </BasicDrawer>
  </div>
</template>

<style lang="less" scoped></style>