import { Button } from 'antd';
import React, { useRef } from 'react';
import { XForm } from '../packages/react/src/index';
import { ISchema } from '../packages/types/src/index';


const schema: ISchema = [
    {
        key: 'input1',
        type: 'Input',
        ui: {
            label: 'blur测试'
        },
        rules: [
            {
                type: 'email',
                message: 'blur测试',
                trigger: 'blur'
            }
        ]
    },
    {
        key: 'input2',
        type: 'Input',
        ui: {
            label: 'change测试'
        },
        rules: [
            {
                type: 'email',
                message: 'change测试',
                trigger: 'change'
            }
        ]
    },
    {
        key: 'input3',
        type: 'Input',
        ui: {
            label: 'submit测试'
        },
        rules: [
            {
                type: 'email',
                message: 'submit测试',
                trigger: 'submit'
            }
        ]
    },
    {
        key: 'input4',
        type: 'Input',
        ui: {
            label: 'warning测试'
        },
        rules: [
            {
                type: 'email',
                message: 'warning测试',
                status: 'warning',
                trigger: 'change'
            }
        ]
    },
    {
        key: 'array1',
        type: 'Array',
        ui: {
            label: '表单列表验证'
        },
        children: [
            {
                key: 'name',
                type: 'Input',
                ui: {
                    label: '姓名'
                }
            },
            {
                key: 'email',
                type: 'Input',
                ui: {
                    label: 'Email'
                },
                rules: [
                    {
                        type: 'email',
                        trigger: 'change'
                    }
                ]
            },
            {
                key: 'sex',
                type: 'Radio',
                ui: {
                    label: '性别'
                },
                options: [
                    {
                        name: '男',
                        value: 'male'
                    },
                    {
                        name: '女',
                        value: 'female'
                    }
                ]
            }
        ],
        rules: [
            {
                type: 'array',
                required: true,
                defaultField: {
                    type: 'object',
                    fields: {
                        name: {type: 'string', required: true},
                        email: {type: 'email', required: true},
                        sex: {type: 'string', required: true}
                    }
                },
                trigger: 'change'
            }
        ]
    },
    {
        key: 'required1',
        type: 'Input',
        ui: {
            label: '必填样式测试',
            required: true,
        }
    },
    {
        key: 'required2',
        type: 'Input',
        ui: {
            label: '必填功能测试'
        },
        rules: [
            {
                required: true,
                message: '该参数必填'
            }
        ]
    },
    {
        key: 'function1',
        type: 'Input',
        ui: {
            label: '自定义校验测试'
        },
        rules: [
            {
                validator: (_: any, value: any) => {
                    return !!value;
                },
                message: '该参数必填'
            }
        ]
    },
    {
        key: 'function2',
        type: 'Input',
        ui: {
            label: '异步自定义校验测试'
        },
        rules: [
            {
                asyncValidator: async (_: any, value: any) => {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            // 这个reject必须填个非false的值不然直接验证通过，好奇葩
                            !!value ? resolve(true) : reject(true);
                        }, 5000);
                    });
                },
                message: '该参数必填'
            }
        ]
    }
];

export default function() {
    const formRef = useRef(null);

    const onSubmit = () => {
        formRef.current.submit().then((data: any) => {
            console.log(data);
        });
    };

    const onReset = () => {
        formRef.current.reset();
    };

    const onEmpty = () => {
        formRef.current.empty();
    };

    return (
        <>
            <XForm
                ref={formRef}
                schema={schema}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
            />
            <div style={{display: 'flex', justifyContent: 'center'}}>
                <Button type="primary" onClick={onSubmit}>提交</Button>
                <Button style={{ marginLeft: '10px' }} onClick={onReset}>重置</Button>
                <Button style={{ marginLeft: '10px' }} onClick={onEmpty}>清空</Button>
            </div>
        </>
    );
}