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

const schema: ISchema = [
    {
        key: 'radio1',
        type: 'Radio',
        ui: {
            label: '初始化联动1'
        },
        value: 1,
        options: [
            {
                name: '联动',
                value: 1
            },
            {
                name: '不联动',
                value: 0
            }
        ]
    },
    {
        key: 'input1',
        type: 'Input',
        ui: {
            label: '初始化联动2'
        },
        listeners: [
            {
                watch: [ 'radio1' ],
                condition: 'radio1.value == 1',
                set: {
                    value: '联动'
                }
            }
        ]
    },
    {
        key: 'input2',
        type: 'Input',
        ui: {
            label: '初始化联动3'
        },
        listeners: [
            {
                watch: [ 'input1' ],
                condition: 'input1.value == "联动"',
                set: {
                    value: '联动'
                }
            }
        ]
    },
    {
        key: 'radio2',
        type: 'Radio',
        ui: {
            label: '循环联动1'
        },
        value: 0,
        options: [
            {
                name: '联动',
                value: 1
            },
            {
                name: '不联动',
                value: 0
            }
        ],
        listeners: [
            {
                watch: [ 'input4' ],
                condition: 'input4.value == "联动"',
                set: {
                    status: "disabled"
                }
            }
        ]
    },
    {
        key: 'input3',
        type: 'Input',
        ui: {
            label: '循环联动2'
        },
        listeners: [
            {
                watch: [ 'radio2' ],
                condition: 'radio2.value == 1',
                set: {
                    value: '联动'
                }
            }
        ]
    },
    {
        key: 'input4',
        type: 'Input',
        ui: {
            label: '循环联动3'
        },
        listeners: [
            {
                watch: [ 'input3' ],
                condition: 'input3.value == "联动"',
                set: {
                    value: '联动'
                }
            }
        ]
    },
    {
        key: 'radio3',
        type: 'Radio',
        ui: {
            label: '列表联动1'
        },
        value: 0,
        options: [
            {
                name: '联动',
                value: 1
            },
            {
                name: '不联动',
                value: 0
            }
        ]
    },
    {
        key: 'array1',
        type: 'Array',
        ui: {
            label: '列表联动2'
        },
        value: [
            {
                name: 'Jason',
                sex: 'male',
                phone: '87654321'
            }
        ],
        children: [
            {
                key: 'name',
                type: 'Input',
                ui: {
                    label: '名称'
                }
            },
            {
                key: 'sex',
                type: 'Radio',
                ui: {
                    label: '性别'
                },
                options: [
                    {
                        name: '男',
                        value: 'male'
                    },
                    {
                        name: '女',
                        value: 'female'
                    }
                ]
            },
            {
                key: 'phone',
                type: 'Input',
                ui: {
                    label: '电话'
                }
            }
        ],
        listeners: [
            {
                watch: [ 'radio3' ],
                condition: 'radio3.value == 1',
                set: {
                    value: [
                        {
                            name: 'Mark',
                            sex: 'female',
                            phone: '12345678'
                        }
                    ]
                }
            }
        ]
    },
    {
        key: 'radio4',
        type: 'Radio',
        ui: {
            label: '组联动1'
        },
        value: 0,
        options: [
            {
                name: '联动',
                value: 1
            },
            {
                name: '不联动',
                value: 0
            }
        ]
    },
    {
        key: 'object1',
        type: 'Object',
        ui: {
            label: '组联动2'
        },
        value: {
            name: 'Jason',
            sex: 'male',
            phone: '87654321'
        },
        children: [
            {
                key: 'name',
                type: 'Input',
                ui: {
                    label: '名称'
                }
            },
            {
                key: 'sex',
                type: 'Radio',
                ui: {
                    label: '性别'
                },
                options: [
                    {
                        name: '男',
                        value: 'male'
                    },
                    {
                        name: '女',
                        value: 'female'
                    }
                ]
            },
            {
                key: 'phone',
                type: 'Input',
                ui: {
                    label: '电话'
                }
            }
        ],
        listeners: [
            {
                watch: [ 'radio4' ],
                condition: 'radio4.value == 1',
                set: {
                    value: {
                        name: 'Mark',
                        sex: 'female',
                        phone: '12345678'
                    }
                }
            }
        ]
    },
];

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>
        </>
    );
}