import type { ProFormColumnsType } from '@ant-design/pro-components';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
import type { FormInstance } from 'antd/lib';
import React, { 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;
}

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,
    },
    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 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);
      }
    };
    // const customHeader = (
    //   <div
    //     style={{
    //       display: "flex",
    //       justifyContent: "space-between",
    //       alignItems: "center",
    //       padding: "0 0px 16px 0px",
    //       borderBottom: "1px solid #f0f0f0",
    //       marginBottom: "16px",
    //     }}
    //   >
    //     <Title level={4} style={{ margin: 0 }}>
    //       {title}
    //     </Title>
    //     <Button
    //       type="text"
    //       icon={<CloseOutlined />}
    //       onClick={() => setOpen(false)}
    //       style={{
    //         border: "none",
    //         boxShadow: "none",
    //       }}
    //     />
    //   </div>
    // );
    return (
      <Drawer
        title={title}
        styles={{
          header: {
            textAlign: 'left',
            position: 'relative',
          },
        }}
        destroyOnHidden
        closable={true} // 隐藏默认关闭按钮
        open={open}
        onClose={() => setOpen(false)}
        width={width}
        footer={
          <Space style={{ width: '100%', justifyContent: 'end' }}>
            <Button onClick={() => setOpen(false)}>取消</Button>
            <Button loading={loading} type="primary" onClick={handleSubmit}>
              保存
            </Button>
          </Space>
        }
      >
        {/* {customHeader} */}
        <BetaSchemaForm
          initialValues={formData}
          layoutType="Form"
          formRef={formRef}
          columns={columns}
          layout="horizontal"
          labelCol={labelCol}
          wrapperCol={wrapperCol}
          submitter={false}
        />
      </Drawer>
    );
  },
);

export default ConfigurableDrawerForm;