import { areacontrollerGetarealist } from '@/servers/api/area';
import { stockcontrollerGetallstockpoints } from '@/servers/api/stock';
import {
  DrawerForm,
  ProFormDependency,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useEffect } from 'react';

// 定义组件的 props 类型
interface EditSiteFormProps {
  open: boolean; // 控制抽屉表单的显示和隐藏
  onOpenChange: (visible: boolean) => void; // 当抽屉表单显示状态改变时调用
  onFinish: (values: any) => Promise<boolean | void>; // 表单提交成功时的回调
  initialValues?: any; // 表单的初始值
  isEdit: boolean; // 标记当前是编辑模式还是新建模式
}

const EditSiteForm: React.FC<EditSiteFormProps> = ({
  open,
  onOpenChange,
  onFinish,
  initialValues,
  isEdit,
}) => {
  const [form] = Form.useForm();

  // 当 initialValues 或 open 状态变化时, 更新表单的值
  useEffect(() => {
    // 如果抽屉是打开的
    if (open) {
      // 如果是编辑模式并且有初始值
      if (isEdit && initialValues) {
        // 编辑模式下, 设置表单值为初始值
        form.setFieldsValue({
          ...initialValues,
          isDisabled: initialValues.isDisabled === 1, // 将后端的 1/0 转换成 true/false
        });
      } else {
        // 新建模式或抽屉关闭时, 重置表单
        form.resetFields();
      }
    }
  }, [initialValues, isEdit, open, form]);

  return (
    <DrawerForm
      title={isEdit ? '编辑站点' : '新建站点'}
      form={form}
      open={open}
      onOpenChange={onOpenChange}
      onFinish={async (values) => {
        // 直接将表单值传递给 onFinish 回调
        // 后端需要布尔值, 而 ProFormSwitch 已经提供了布尔值
        return onFinish(values);
      }}
      layout="vertical"
    >
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormTextArea
        name="description"
        label="描述"
        placeholder="请输入描述"
      />
      <ProFormText
        name="apiUrl"
        label="API 地址"
        rules={[{ required: true, message: '请输入 API 地址' }]}
        placeholder="请输入 API 地址"
      />
      <ProFormText
        name="websiteUrl"
        label="网站地址"
        placeholder="请输入网站地址"
      />
      <ProFormSelect
        name="type"
        label="平台"
        options={[
          { label: 'WooCommerce', value: 'woocommerce' },
          { label: 'Shopyy', value: 'shopyy' },
        ]}
        rules={[{ required: true, message: '请选择平台' }]}
        placeholder="请选择平台"
      />
      {/* 根据选择的平台动态显示不同的认证字段 */}
      <ProFormDependency name={['type']}>
        {({ type }) => {
          // 如果平台是 woocommerce
          if (type === 'woocommerce') {
            return (
              <>
                <ProFormText
                  name="consumerKey"
                  label="Consumer Key"
                  rules={[
                    { required: !isEdit, message: '请输入 Consumer Key' },
                  ]}
                  placeholder={
                    isEdit ? '留空表示不修改' : '请输入 Consumer Key'
                  }
                />
                <ProFormText
                  name="consumerSecret"
                  label="Consumer Secret"
                  rules={[
                    { required: !isEdit, message: '请输入 Consumer Secret' },
                  ]}
                  placeholder={
                    isEdit ? '留空表示不修改' : '请输入 Consumer Secret'
                  }
                />
              </>
            );
          }
          // 如果平台是 shopyy
          if (type === 'shopyy') {
            return (
              <ProFormText
                name="token"
                label="Token"
                rules={[{ required: !isEdit, message: '请输入 Token' }]}
                placeholder={isEdit ? '留空表示不修改' : '请输入 Token'}
              />
            );
          }
          return null;
        }}
      </ProFormDependency>
      <ProFormText
        name="skuPrefix"
        label="SKU 前缀"
        placeholder="请输入 SKU 前缀"
      />
      <ProFormSelect
        name="areas"
        label="区域"
        mode="multiple"
        placeholder="请选择区域"
        request={async () => {
          // 从后端接口获取区域数据
          const res = await areacontrollerGetarealist({ pageSize: 1000 });
          // areacontrollerGetarealist 直接返回数组, 所以不需要 .data.list
          return res.map((area: any) => ({
            label: area.name,
            value: area.code,
          }));
        }}
      />
      <ProFormSelect
        name="stockPointIds"
        label="关联仓库"
        mode="multiple"
        placeholder="请选择关联仓库"
        request={async () => {
          // 从后端接口获取仓库数据
          const res = await stockcontrollerGetallstockpoints();
          // 使用可选链和空值合并运算符来安全地处理可能未定义的数据
          return (
            res?.data?.map((sp: any) => ({ label: sp.name, value: sp.id })) ??
            []
          );
        }}
      />
      <ProFormSwitch name="isDisabled" label="是否禁用" />
    </DrawerForm>
  );
};

export default EditSiteForm;