import type { ProFormColumnsType } from "@ant-design/pro-components";
import { BetaSchemaForm } from "@ant-design/pro-components";
import { Button, type ColProps, Drawer, Space } from "antd";
import type { FormInstance } from "antd/lib";
import React, {
  Children,
  cloneElement,
  forwardRef,
  useImperativeHandle,
} from "react";

interface ConfigurableDrawerFormProps {
  title?: string;
  columns?: ProFormColumnsType[];
  onSubmit?: (values: any) => Promise<boolean>;
  initialValues?: Record<string, any>;
  width?: number | string;
  labelCol?: ColProps;
  wrapperCol?: ColProps;
  footer?: React.ReactNode;
  children?: React.ReactNode;
  bodyStyle?: React.CSSProperties;
}

export interface ConfigurableDrawerFormRef {
  open: (data?: Record<string, any>) => void;
  close: () => void;
}

const ConfigurableDrawerForm = forwardRef<
  ConfigurableDrawerFormRef,
  ConfigurableDrawerFormProps
>(
  (
    {
      title = "表单",
      labelCol = { span: 4 },
      wrapperCol = { span: 20 },
      columns,
      onSubmit,
      initialValues,
      width = 600,
      footer,
      children,
      bodyStyle = {},
    },
    ref
  ) => {
    const [open, setOpen] = React.useState(false);
    const [formData, setFormData] = React.useState(initialValues || {});
    const [loading, setLoading] = React.useState<boolean>(false);
    // 添加表单实例引用
    const formRef = React.useRef<FormInstance>(null);
    useImperativeHandle(ref, () => ({
      open: (data) => {
        if (data) {
          setFormData(data);
        }
        console.log("open");
        setOpen(true);
      },
      close: () => setOpen(false),
    }));
    const renderChildren = () => {
      return Children.map(children, (child) => {
        if (React.isValidElement(child)) {
          // 使用更安全的方式传递属性，避免 TypeScript 错误
          return cloneElement(child, {
            ...formData,
          } as any);
        }
        return child;
      });
    };
    const handleSubmit = async () => {
      try {
        if (onSubmit) {
          await formRef.current?.validateFields();
          setLoading(true);
          const values = formRef.current?.getFieldsValue();
          const success = await onSubmit(values);
          if (success) {
            setOpen(false);
            return true;
          }
          return false;
        }
        return true;
      } finally {
        setLoading(false);
      }
    };

    return (
      <Drawer
        title={title}
        styles={{
          header: {
            textAlign: "left",
            position: "relative",
          },
          body: {
            background: "var(--ant-background-color)",
            padding: "var(--ant-padding-lg)",
            ...bodyStyle,
          },
        }}
        destroyOnHidden
        closable={true} // 隐藏默认关闭按钮
        open={open}
        onClose={() => setOpen(false)}
        width={width}
        footer={
          <Space style={{ width: "100%", justifyContent: "end" }}>
            {footer ? (
              footer
            ) : (
              <>
                <Button onClick={() => setOpen(false)}>取消</Button>
                <Button loading={loading} type="primary" onClick={handleSubmit}>
                  保存
                </Button>
              </>
            )}
          </Space>
        }
      >
        {columns ? (
          <BetaSchemaForm
            initialValues={formData}
            layoutType="Form"
            formRef={formRef}
            columns={columns}
            layout="horizontal"
            labelCol={labelCol}
            wrapperCol={wrapperCol}
            submitter={false}
          />
        ) : (
          renderChildren()
          // children
        )}
      </Drawer>
    );
  }
);

export default ConfigurableDrawerForm;