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: 'input',
        type: 'Input',
        value: '12124',
        ui: {
            label: 'Input'
        }
    },
    {
        key: 'textArea',
        type: 'TextArea',
        value: '12124',
        ui: {
            label: 'TextArea'
        }
    },
    {
        key: 'inputNumber',
        type: 'InputNumber',
        value: 123,
        ui: {
            label: 'InputNumber',
            tooltip:
                '值为数字类型的组件 rules 中 type 要为 number，否则会报错：xxx is not a string'
        },
        rules: [
            {
                required: true,
                type: 'number',
                trigger: 'change'
            }
        ]
    },
    {
        key: 'autoComplete',
        type: 'AutoComplete',
        value: '123',
        ui: { label: 'AutoComplete' },
        options: ['gmail.com', '163.com', 'qq.com']
            .map((domain) => `123@${domain}`)
            .map((email) => ({ name: email, value: email }))
    },
    {
        key: 'inputPreview',
        type: 'Input',
        status: 'preview',
        value: '123',
        ui: { label: 'Input preview' }
    },
    {
        key: 'disabled',
        type: 'Input',
        status: 'disabled',
        value: '123',
        ui: { label: 'disabled 状态' }
    },
    {
        key: 'switch',
        type: 'Switch',
        value: true,
        ui: { label: 'Switch' }
    },
    {
        key: 'radio',
        type: 'Radio',
        ui: { label: 'Radio' },
        props: {
            value: 'data1'
        },
        options: [
            { name: '数据1', value: 'data1' },
            { name: '数据2', value: 'data2' },
            { name: '数据3', value: 'data3', disabled: true }
        ]
    },
    {
        key: 'radioPreview',
        type: 'Radio',
        status: 'preview',
        ui: { label: 'Radio preview' },
        props: {
            value: 'data1'
        },
        options: [
            { name: '数据1', value: 'data1' },
            { name: '数据2', value: 'data2' },
            { name: '数据3', value: 'data3', disabled: true }
        ]
    },
    {
        key: 'radioButton',
        type: 'RadioButton',
        value: 'data1',
        ui: { label: 'RadioButton' },
        props: {
            buttonStyle: 'solid'
        },
        options: [
            { name: '数据1', value: 'data1' },
            { name: '数据2', value: 'data2' },
            { name: '数据3', value: 'data3', disabled: true }
        ]
    },
    {
        key: 'checkbox',
        type: 'Checkbox',
        value: ['data1', 'data2'],
        ui: {
            label: 'Checkbox'
        },
        options: [
            { name: '数据1', value: 'data1' },
            { name: '数据2', value: 'data2' },
            { name: '数据3', value: 'data3', disabled: true }
        ]
    },
    {
        key: 'checkboxPreview',
        type: 'Checkbox',
        status: 'preview',
        ui: {
            label: 'Checkbox preview'
        },
        props: {
            value: ['data1', 'data2']
        },
        options: [
            { name: '数据1', value: 'data1' },
            { name: '数据2', value: 'data2' },
            { name: '数据3', value: 'data3', disabled: true }
        ]
    },
    {
        key: 'checkboxAll',
        type: 'CheckboxAll',
        ui: {
            label: 'CheckboxAll'
        },
        props: {
            value: ['data1', 'data2']
        },
        options: [
            { name: '数据1', value: 'data1' },
            { name: '数据2', value: 'data2' },
            { name: '数据3', value: 'data3' }
        ]
    },
    // Select 1.基本使用 ✅
    {
        key: 'select1',
        type: 'Select',
        value: 1,
        ui: { label: '普通Select' },
        options: [
            { name: '显示', value: 1 },
            { name: '隐藏', value: 2 }
        ]
    },
    {
        key: 'select1Preview',
        type: 'Select',
        status: 'preview',
        value: 1,
        ui: { label: '普通Select的preview' },
        options: [
            { name: '显示', value: 1 },
            { name: '隐藏', value: 2 }
        ]
    },
    // 2.带搜索框 ✅
    {
        key: 'select2',
        type: 'Select',
        value: 1,
        ui: {
            label: '搜索框Select'
        },
        props: {
            placeholder: '请选择',
            showSearch: true,
            optionFilterProp: 'test'
        },
        options: [
            { name: '数据1', value: 1, disabled: true, test: 'a' },
            { name: '数据2', value: 2, test: 'b' }
        ]
    },
    // 3.多选框 ✅
    {
        key: 'select3',
        type: 'Select',
        value: [1, 2],
        ui: {
            label: '多选Select'
        },
        options: [
            { name: '数据1', value: 1 },
            { name: '数据2', value: 2 },
            { name: '数据3', value: 3 }
        ],
        props: {
            placeholder: '请选择',
            mode: 'multiple'
        }
    },
    {
        key: 'select3Preview',
        type: 'Select',
        status: 'preview',
        value: [1, 2],
        ui: {
            label: '多选Select的preview'
        },
        options: [
            { name: '数据1', value: 1 },
            { name: '数据2', value: 2 },
            { name: '数据3', value: 3 }
        ],
        props: {
            placeholder: '请选择',
            mode: 'multiple'
        }
    },
    // 4.三种大小 ✅
    {
        key: 'select4',
        type: 'Select',
        value: [1, 2],
        ui: {
            label: '三种大小Select'
        },
        props: {
            placeholder: '请选择',
            mode: 'multiple',
            size: 'large' // large, small, default
        },
        options: [
            { name: '数据1', value: 1 },
            { name: '数据2', value: 2 },
            { name: '数据3', value: 3 }
        ]
    },
    // 5.定制回填内容 ✅
    {
        key: 'select5',
        type: 'Select',
        value: [1, 2],
        ui: {
            label: '定制回填内容Select'
        },
        props: {
            placeholder: '请选择',
            mode: 'multiple',
            optionLabelProp: 'test'
        },
        options: [
            { name: '数据1', value: 1, test: 'a' },
            { name: '数据2', value: 2, test: 'b' },
            { name: '数据3', value: 3, test: 'c' }
        ]
    },
    // 6.标签 ✅(当mode为tags时option的value不能为string外任意类型)
    {
        key: 'select6',
        type: 'Select',
        ui: {
            label: '标签Select'
        },
        props: {
            placeholder: '请选择',
            mode: 'tags'
        },
        options: [
            { name: '数据1', value: '1' },
            { name: '数据2', value: '2' }
        ]
    },
    // 7.分组 用OptGroup 进行选项分组 ✅
    {
        key: 'select7',
        type: 'Select',
        value: 1,
        ui: {
            label: '分组Select'
        },
        options: [
            { name: '数据1', value: 1, group: 1 },
            { name: '数据2', value: 2, group: 1 },
            { name: '数据3', value: 3, group: 1 },
            { name: '数据4', value: 4 },
            { name: '数据5', value: 5 }
        ]
    },
    // Cascader 基本使用
    {
        key: 'cascader1',
        type: 'Cascader',
        value: ['zhejiang', 'hangzhou', 'xihu'],
        ui: {
            label: 'Cascader'
        },
        options: [
            {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                    {
                        value: 'hangzhou',
                        label: 'Hangzhou',
                        children: [
                            {
                                value: 'xihu',
                                label: 'West Lake'
                            }
                        ]
                    }
                ]
            },
            {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                    {
                        value: 'nanjing',
                        label: 'Nanjing',
                        children: [
                            {
                                value: 'zhonghuamen',
                                label: 'Zhong Hua Men'
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        key: 'cascader1Preview',
        type: 'Cascader',
        status: 'preview',
        value: ['zhejiang', 'hangzhou', 'xihu'],
        ui: {
            label: 'Cascader preview'
        },
        options: [
            {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                    {
                        value: 'hangzhou',
                        label: 'Hangzhou',
                        children: [
                            {
                                value: 'xihu',
                                label: 'West Lake'
                            }
                        ]
                    }
                ]
            },
            {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                    {
                        value: 'nanjing',
                        label: 'Nanjing',
                        children: [
                            {
                                value: 'zhonghuamen',
                                label: 'Zhong Hua Men'
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        key: 'TreeSelect',
        type: 'TreeSelect',
        value: 'leaf1',
        ui: { label: 'TreeSelect' },
        options: [
            {
                name: 'parent1',
                value: 'parent1',
                children: [
                    {
                        name: '1',
                        value: 'parent1-1',
                        children: [
                            {
                                name: 'leaf1',
                                value: '1-leaf1'
                            },
                            {
                                name: 'leaf2',
                                value: '1-leaf2'
                            }
                        ]
                    },
                    {
                        name: '2',
                        value: 'parent1-2',
                        children: [
                            {
                                name: 'leaf3',
                                value: '2-leaf3'
                            },
                            {
                                name: 'leaf4',
                                value: '2-leaf4'
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        key: 'treeSelectPreview',
        type: 'TreeSelect',
        status: 'preview',
        value: 'leaf1',
        ui: { label: 'TreeSelect preview' },
        options: [
            {
                name: 'parent1',
                value: 'parent1',
                children: [
                    {
                        name: '1',
                        value: 'parent1-1',
                        children: [
                            {
                                name: 'leaf1',
                                value: '1-leaf1'
                            },
                            {
                                name: 'leaf2',
                                value: '1-leaf2'
                            }
                        ]
                    },
                    {
                        name: '2',
                        value: 'parent1-2',
                        children: [
                            {
                                name: 'leaf3',
                                value: '2-leaf3'
                            },
                            {
                                name: 'leaf4',
                                value: '2-leaf4'
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        key: 'transfer',
        type: 'Transfer',
        value: [3, 4],
        options: [
            {
                name: 'content1',
                value: 1
            },
            {
                name: 'content2',
                value: 2,
                disabled: false
            },
            {
                name: 'content3',
                value: 3
            },
            {
                name: 'content4',
                value: 4
            },
            {
                name: 'content5',
                value: 5
            }
        ],
        ui: { label: 'Transfer' }
    },
    {
        key: 'datePicker',
        type: 'DatePicker',
        value: '2020-10-08T08:44:26.484Z',
        ui: { label: 'DatePicker' },
        props: {
            valueType: 'timestamp'
        }
    },
    {
        key: 'dateTimePicker',
        type: 'DateTimePicker',
        value: '2020-10-08T08:44:26.484Z',
        ui: { label: 'DateTimePicker' }
    },
    {
        key: 'monthPicker',
        type: 'MonthPicker',
        value: '2020-10-08T08:44:26.484Z',
        ui: { label: 'MonthPicker' },
        props: {
            valueType: 'timestamp'
        }
    },
    {
        key: 'rangePicker',
        type: 'RangePicker',
        value: ['2020-10-08T08:44:26.484Z', '2020-10-31T08:44:26.484Z'],
        ui: { label: 'RangePicker' },
        props: {
            valueType: 'timestamp'
        }
    },
    {
        key: 'weekPicker',
        type: 'WeekPicker',
        value: '2020-10-08T08:44:26.484Z',
        ui: { label: 'WeekPicker' },
        props: {
            valueType: 'timestamp'
        }
    },
    {
        key: 'timePicker',
        type: 'TimePicker',
        value: '2020-10-08T08:44:26.484Z',
        ui: { label: 'TimePicker' }
    },
    {
        key: 'rate',
        type: 'Rate',
        value: 3,
        ui: { label: 'Rate' }
    },
    {
        key: 'slider',
        type: 'Slider',
        value: 50,
        ui: { label: 'Slider' }
    }
];

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: 8 }}
                wrapperCol={{ span: 14 }}
            />
            <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>
        </>
    );
}