import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { BackendSourceValueMap } from '../config';
import { FormContext } from '../config/form-context';
import { FormData, ListItem } from '../config/types';
import BasicForm from './basic';
import VersionsForm from './versions-config';

type AddModalProps = {
  action: PageActionType;
  currentData?: ListItem;
  onFinish: (values: FormData) => void;
  onFinishFailed?: (errorInfo: any) => void;
  ref?: any;
};
const BackendForm: React.FC<AddModalProps> = forwardRef(
  ({ action, currentData, onFinish, onFinishFailed }, ref) => {
    const intl = useIntl();
    const [form] = Form.useForm();
    const [activeKey, setActiveKey] = React.useState<string[]>([]);
    const backendSource = Form.useWatch('backend_source', form);

    const showCustomSuffix =
      currentData?.backend_source === BackendSourceValueMap.BUILTIN ||
      currentData?.backend_source === BackendSourceValueMap.COMMUNITY;

    const handleOnFinishFailed = (errorInfo: any) => {
      const errorFields = errorInfo.errorFields || [];
      if (errorFields.length > 0) {
        const versionError = errorFields.find((field: any) =>
          field.name.includes('version_configs')
        );
        if (versionError) {
          setActiveKey([...new Set([versionError.name[1]])]);
        } else {
          setActiveKey([]);
        }
      }
      onFinishFailed?.(errorInfo);
    };

    const handleOnFinish = (values: FormData) => {
      const data = {
        ...values,
        backend_name:
          backendSource === BackendSourceValueMap.CUSTOM
            ? `${values.backend_name}-custom`
            : values.backend_name
      };

      // add '-custom' suffix to version_no in version_configs when backendSource is BUILTIN or COMMUNITY
      data.version_configs = data.version_configs?.map((item) => {
        if (item.version_no) {
          return {
            ...item,
            version_no: [
              BackendSourceValueMap.BUILTIN,
              BackendSourceValueMap.COMMUNITY
            ].includes(backendSource)
              ? `${item.version_no}-custom`
              : item.version_no
          };
        }
        return item;
      });
      onFinish(data);
    };

    useEffect(() => {
      if (currentData) {
        form.setFieldsValue(currentData);
      }
    }, [currentData]);

    useImperativeHandle(ref, () => ({
      resetFields: () => {
        form.resetFields();
      },
      submit: () => {
        form.submit();
      },
      setFieldsValue: (values: any) => {
        form.setFieldsValue(values);
      },
      getFieldsValue: () => {
        return form.getFieldsValue();
      },
      validateFields: async () => {
        return await form.validateFields();
      }
    }));

    return (
      <FormContext.Provider
        value={{
          action: action,
          backendSource: backendSource,
          showCustomSuffix: showCustomSuffix
        }}
      >
        <Form
          name="basicForm"
          form={form}
          onFinish={handleOnFinish}
          preserve={false}
          scrollToFirstError={true}
          initialValues={_.omit(currentData, ['version_configs'])}
          onFinishFailed={handleOnFinishFailed}
        >
          <BasicForm></BasicForm>
          <VersionsForm
            action={action}
            currentData={currentData}
            activeKey={activeKey}
          ></VersionsForm>
        </Form>
      </FormContext.Provider>
    );
  }
);

export default BackendForm;