certimate/ui/src/components/notification/NotifyChannelEditForm.tsx

import { forwardRef, useImperativeHandle, useMemo } from "react";
import { useCreation } from "ahooks";
import { Form, type FormInstance } from "antd";

import { useAntdForm } from "@/hooks";
import { NOTIFY_CHANNELS, type NotifyChannelsSettingsContent } from "@/domain/settings";
import NotifyChannelEditFormBarkFields from "./NotifyChannelEditFormBarkFields";
import NotifyChannelEditFormDingTalkFields from "./NotifyChannelEditFormDingTalkFields";
import NotifyChannelEditFormEmailFields from "./NotifyChannelEditFormEmailFields";
import NotifyChannelEditFormLarkFields from "./NotifyChannelEditFormLarkFields";
import NotifyChannelEditFormServerChanFields from "./NotifyChannelEditFormServerChanFields";
import NotifyChannelEditFormTelegramFields from "./NotifyChannelEditFormTelegramFields";
import NotifyChannelEditFormWebhookFields from "./NotifyChannelEditFormWebhookFields";
import NotifyChannelEditFormWeComFields from "./NotifyChannelEditFormWeComFields";

type NotifyChannelEditFormFieldValues = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];

export type NotifyChannelEditFormProps = {
  className?: string;
  style?: React.CSSProperties;
  channel: string;
  disabled?: boolean;
  initialValues?: NotifyChannelEditFormFieldValues;
  onValuesChange?: (values: NotifyChannelEditFormFieldValues) => void;
};

export type NotifyChannelEditFormInstance = {
  getFieldsValue: () => ReturnType<FormInstance<NotifyChannelEditFormFieldValues>["getFieldsValue"]>;
  resetFields: FormInstance<NotifyChannelEditFormFieldValues>["resetFields"];
  validateFields: FormInstance<NotifyChannelEditFormFieldValues>["validateFields"];
};

const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyChannelEditFormProps>(
  ({ className, style, channel, disabled, initialValues, onValuesChange }, ref) => {
    const { form: formInst, formProps } = useAntdForm({
      initialValues: initialValues,
    });
    const formName = useCreation(() => `notifyChannelEditForm_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
    const formFieldsComponent = useMemo(() => {
      /*
        注意：如果追加新的子组件，请保持以 ASCII 排序。
        NOTICE: If you add new child component, please keep ASCII order.
       */
      switch (channel) {
        case NOTIFY_CHANNELS.BARK:
          return <NotifyChannelEditFormBarkFields />;
        case NOTIFY_CHANNELS.DINGTALK:
          return <NotifyChannelEditFormDingTalkFields />;
        case NOTIFY_CHANNELS.EMAIL:
          return <NotifyChannelEditFormEmailFields />;
        case NOTIFY_CHANNELS.LARK:
          return <NotifyChannelEditFormLarkFields />;
        case NOTIFY_CHANNELS.SERVERCHAN:
          return <NotifyChannelEditFormServerChanFields />;
        case NOTIFY_CHANNELS.TELEGRAM:
          return <NotifyChannelEditFormTelegramFields />;
        case NOTIFY_CHANNELS.WEBHOOK:
          return <NotifyChannelEditFormWebhookFields />;
        case NOTIFY_CHANNELS.WECOM:
          return <NotifyChannelEditFormWeComFields />;
      }
    }, [channel]);

    const handleFormChange = (_: unknown, values: NotifyChannelEditFormFieldValues) => {
      onValuesChange?.(values);
    };

    useImperativeHandle(ref, () => {
      return {
        getFieldsValue: () => {
          return formInst.getFieldsValue(true);
        },
        resetFields: (fields) => {
          return formInst.resetFields(fields);
        },
        validateFields: (nameList, config) => {
          return formInst.validateFields(nameList, config);
        },
      } as NotifyChannelEditFormInstance;
    });

    return (
      <Form
        {...formProps}
        className={className}
        style={style}
        form={formInst}
        disabled={disabled}
        name={formName}
        layout="vertical"
        onValuesChange={handleFormChange}
      >
        {formFieldsComponent}
      </Form>
    );
  }
);

export default NotifyChannelEditForm;