import React from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  // 自定義校驗函數
  const checkUsername = (_, value) => {
    if (!value) {
      return Promise.reject(new Error('用戶名不能為空'));
    }
    if (value.length < 3) {
      return Promise.reject(new Error('用戶名長度不能少于3個字符'));
    }
    return Promise.resolve();
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用戶名"
        name="username"
        rules={[
          { required: true, message: '請輸入用戶名!' },
          { validator: checkUsername }  // 使用自定義校驗函數
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;