import { sitecontrollerAll } from '@/servers/api/site';
import { SyncOutlined } from '@ant-design/icons';
import {
  ActionType,
  DrawerForm,
  ProForm,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Button } from 'antd';
import React from 'react';

// 定义SyncForm组件的props类型
interface SyncFormProps {
  tableRef: React.MutableRefObject<ActionType | undefined>;
  onFinish: (values: any) => Promise<void>;
  siteId?: string;
}

/**
 * 同步订单的表单组件
 * @param {SyncFormProps} props 组件属性
 * @returns {React.ReactElement} 抽屉表单
 */
const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId }) => {
  // 使用 antd 的 App 组件提供的 message API
  const [loading, setLoading] = React.useState(false);

  if (siteId) {
    return (
      <Button
        key="syncSite"
        type="primary"
        loading={loading}
        onClick={async () => {
          try {
            setLoading(true);
            await onFinish({ siteId: Number(siteId) });
          } finally {
            setLoading(false);
          }
        }}
      >
        <SyncOutlined />
        同步订单
      </Button>
    );
  }

  // 返回一个抽屉表单
  return (
    <DrawerForm<API.ordercontrollerSyncorderParams>
      title="同步订单"
      // 表单的触发器,一个带图标的按钮
      trigger={
        <Button key="syncSite" type="primary">
          <SyncOutlined />
          同步订单
        </Button>
      }
      // 自动聚焦第一个输入框
      autoFocusFirstInput
      // 抽屉关闭时销毁内部组件
      drawerProps={{
        destroyOnHidden: true,
      }}
      // 表单提交成功后的回调
      onFinish={onFinish}
    >
      <ProForm.Group>
        {/* 站点选择框 */}
        <ProFormSelect
          name="siteId"
          width="lg"
          label="站点"
          placeholder="请选择站点"
          // 异步请求站点列表数据
          request={async () => {
            const { data = [] } = await sitecontrollerAll();
            // 将返回的数据格式化为 ProFormSelect 需要的格式
            return data.map((item: any) => ({
              label: item.name || String(item.id),
              value: item.id,
            }));
          }}
        />
      </ProForm.Group>
    </DrawerForm>
  );
};

export default SyncForm;
