<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { EnableRuleFormType, getFormSchemas, TimezoneEnum } from './config';
  import { nextTick, ref, unref } from 'vue';
  import CustomRule from './CustomRule.vue';
  import { ScheduleTypeEnum } from '/@/enums/linkedgeEnum';
  import { EnableRuleFormModalParamsType, ScheduleType } from './type';
  import { useSceneLinkageDrawerContext } from '../SceneLinkageDrawer/sceneLinkageDrawerContext';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n(); // 加载国际化
  const { disabledDrawer } = useSceneLinkageDrawerContext();

  const emit = defineEmits(['register', 'settingComplete']);

  const scheduleItemKey = ref<string>();
  const [registerModal, { closeModal }] = useModalInner(
    ({ record }: EnableRuleFormModalParamsType) => {
      resetFields();
      const { type, schedule, key } = record;
      scheduleItemKey.value = key;
      handleSetFieldsValue({ ...schedule, type });
      clearValidate();
    }
  );

  const [register, { getFieldsValue, validate, setFieldsValue, resetFields, clearValidate }] =
    useForm({
      schemas: getFormSchemas(),
      showActionButtonGroup: false,
      layout: 'vertical',
    });

  const customRuleElRef = ref<Nullable<InstanceType<typeof CustomRule>>>();

  const handleGetFieldsValue = async (): Promise<ScheduleType> => {
    await unref(customRuleElRef)?.validate?.();
    await validate();
    const { type, timeRange, timezone, daysOfWeek } = getFieldsValue() as EnableRuleFormType;
    const customValue = unref(customRuleElRef)?.getFieldsValue();

    if (type === ScheduleTypeEnum.ANY_TIME) return { type };

    if (type === ScheduleTypeEnum.SPECIFIC_TIME)
      return {
        type,
        timezone,
        daysOfWeek,
        ...timeRange,
      };

    return {
      type,
      timezone,
      items: customValue,
    };
  };

  const handleSetFieldsValue = async (schedule: ScheduleType) => {
    const { type, startsOn, endsOn, timezone = TimezoneEnum.SHANG_HAI, daysOfWeek } = schedule;

    if (type === ScheduleTypeEnum.ANY_TIME) return setFieldsValue({ type });

    if (type === ScheduleTypeEnum.SPECIFIC_TIME)
      return setFieldsValue({
        type,
        timezone,
        daysOfWeek,
        timeRange: { startsOn, endsOn },
      });

    setFieldsValue(schedule);
    await nextTick();
    unref(customRuleElRef)?.setFieldsValue(schedule.items || []);
  };

  const handleOk = async () => {
    const result = await handleGetFieldsValue();
    emit('settingComplete', result, unref(scheduleItemKey));
    closeModal();
  };
</script>

<template>
  <BasicModal
    @register="registerModal"
    :title="t('rule.linkedge.index.enableRules')"
    :width="600"
    @ok="handleOk"
    :cancel-text="disabledDrawer ? t('rule.linkedge.index.close') : t('rule.linkedge.index.cancel')"
    :show-ok-btn="!disabledDrawer"
  >
    <BasicForm @register="register" :disabled="disabledDrawer">
      <template #custom="{ model, field }">
        <CustomRule ref="customRuleElRef" v-model:value="model[field]" />
      </template>
    </BasicForm>
  </BasicModal>
</template>