<script setup lang="ts">
  import { CustomRuleItemType } from './type';
  import { ComponentPublicInstance, nextTick, ref, unref, watch } from 'vue';
  import { BasicForm, FormActionType } from '/@/components/Form';
  import { getFormSchemas, RuleFormRecordItem } from './CustomRule.config';
  import { buildUUID } from '/@/utils/uuid';
  import { DefineComponentsBasicExpose } from '/#/utils';

  interface CustomRuleItemRefType {
    key: string;
    ref?: FormActionType;
    value?: CustomRuleItemType;
  }

  const props = withDefaults(
    defineProps<{
      value?: CustomRuleItemType[];
    }>(),
    {
      value: () => [],
    }
  );

  const customRuleListRef = ref<CustomRuleItemRefType[]>(
    Array.from({ length: 7 }, () => ({ key: buildUUID() }))
  );

  const setRuleItemRef = (
    el: Nullable<Element | ComponentPublicInstance>,
    ruleItem: CustomRuleItemRefType
  ) => {
    ruleItem.ref = el as unknown as FormActionType;
  };

  const validate = async () => {
    for (const item of unref(customRuleListRef)) {
      await item.ref?.validate?.();
    }
  };

  const getFieldsValue = (): CustomRuleItemType[] => {
    return unref(customRuleListRef).map((item) => {
      const { dayOfWeek, enabled, timeRange } = item.ref?.getFieldsValue() as RuleFormRecordItem;
      return {
        dayOfWeek,
        enabled,
        ...timeRange,
      };
    });
  };

  const setFieldsValue = async (ruleList: CustomRuleItemType[]) => {
    if (!ruleList.length) return;
    await nextTick();

    ruleList.forEach((value, index) => {
      const refEl = unref(customRuleListRef)[index];
      refEl.ref?.setFieldsValue({
        ...value,
        timeRange: {
          startsOn: value.startsOn,
          endsOn: value.endsOn,
        },
      } as RuleFormRecordItem);
    });
  };

  watch(
    () => props.value,
    () => {
      setFieldsValue(props.value);
    },
    { immediate: true }
  );

  defineExpose<DefineComponentsBasicExpose<CustomRuleItemType[]>>({
    getFieldsValue,
    setFieldsValue,
    validate,
  });
</script>

<template>
  <section>
    <template v-for="(item, index) in customRuleListRef" :key="index">
      <BasicForm
        :ref="(el) => setRuleItemRef(el, item)"
        :show-action-button-group="false"
        :schemas="getFormSchemas(index)"
        class="h-14"
      />
    </template>
  </section>
</template>