import { Button } from 'antd';
import React, { useRef, useState } from 'react';
import { unstable_batchedUpdates as batch } from 'react-dom';
import { XForm } from '../packages/react/src/index';

const defaultValues = {
    name: '璀璨大礼包',
    price: '6000',
    stock: 1,
    content: [
        { type: 2, medalid: 1230002, outdate: -1 },
        { type: 3, titleId: '19001', titleOutdate: '-1' },
        { type: 4, bubbleId: '11001', bubbleOutdate: '-1' },
        { type: 6, bagId: 2021097, bagCount: 5 },
        { type: 5, carId: 2004, carOutdate: -1 }
    ]
};

const limitPositiveInts = (value: string | number) => {
    const reg = /^([1-9])(\d*).*$/;
    if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(reg, '$1$2') : '';
    } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(reg, '$1$2') : '';
    } else {
        return '';
    }
};

const limitSpecialInts = (value: string | number) => {
    const reg = /^(\-)*([1-9][0-9]*).*$/;
    if (String(value) === '-' || Number(value) === -1) {
        return '-1';
    }
    if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(reg, '$2') : '';
    }
    if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(reg, '$2') : '';
    }
    return '';
};

const schema = [
    {
        key: 'name',
        type: 'Input',
        ui: {
            label: '礼包名称',
            required: true
        },
        props: {
            placeholder:
                '请输入礼包名称，不能超过20个字符，中英文都算作1个字符',
            maxLength: 20
        },
        rules: [
            {
                required: true,
                message: '请输入礼包名称'
            }
        ]
    },
    {
        key: 'price',
        type: 'InputNumber',
        ui: {
            label: '价格(音符)',
            required: true
        },
        props: {
            placeholder: '1至10000000之间的整数',
            min: 1,
            step: 1,
            max: 10000000,
            formatter: limitPositiveInts,
            parser: limitPositiveInts,
            style: {
                width: '200px'
            }
        },
        rules: [
            {
                required: true,
                message: '请输入价格'
            }
        ]
    },
    {
        key: 'stock',
        type: 'InputNumber',
        ui: {
            label: '可购买份数(份/日)',
            required: true
        },
        props: {
            placeholder: '1至100000之间的整数',
            min: 1,
            step: 1,
            max: 100000,
            formatter: limitPositiveInts,
            parser: limitPositiveInts,
            style: {
                width: '200px'
            }
        },
        rules: [
            {
                required: true,
                message: '请输入购买份数'
            }
        ]
    },
    {
        key: 'content',
        type: 'Array',
        value: [{ type: 2 }],
        props: {
            type: 'Card',
            max: 8,
            min: 1,
            labelCol: { span: 8 },
            wrapperCol: { span: 14 }
        },
        ui: {
            label: '内容'
        },
        children: [
            {
                key: 'type',
                type: 'Select',
                value: 2,
                ui: {
                    label: '类型',
                    required: true
                },
                options: [
                    {
                        name: '勋章',
                        value: 2
                    },
                    {
                        name: '头衔',
                        value: 3
                    },
                    {
                        name: '气泡',
                        value: 4
                    },
                    {
                        name: '背包',
                        value: 6
                    },
                    {
                        name: '座架',
                        value: 5
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请选择礼品类型'
                    }
                ]
            },
            {
                key: 'medalid',
                type: 'InputNumber',
                ui: {
                    label: '勋章id',
                    required: true
                },
                props: {
                    placeholder: '>=1整数',
                    min: 1,
                    step: 1,
                    formatter: limitPositiveInts,
                    parser: limitPositiveInts,
                    style: {
                        width: '200px'
                    }
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 2',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请输入勋章id'
                    }
                ]
            },
            {
                key: 'outdate',
                type: 'InputNumber',
                ui: {
                    label: '有效期(永久填-1)',
                    required: true
                },
                props: {
                    placeholder: '1至10000之间的整数或-1',
                    min: -1,
                    step: 1,
                    max: 10000,
                    formatter: limitSpecialInts,
                    parser: limitSpecialInts,
                    style: {
                        width: '200px'
                    }
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 2',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请输入有效期'
                    }
                ]
            },
            {
                key: 'titleId',
                type: 'Input',
                ui: {
                    label: '头衔id',
                    required: true
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 3',
                        set: {
                            status: 'hidden'
                        }
                    }
                ]
            },
            {
                key: 'titleOutdate',
                type: 'Input',
                ui: {
                    label: '有效期(天, -1永久)',
                    required: true
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 3',
                        set: {
                            status: 'hidden'
                        }
                    }
                ]
            },
            {
                key: 'bubbleId',
                type: 'Input',
                ui: {
                    label: '气泡框id',
                    required: true
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 4',
                        set: {
                            status: 'hidden'
                        }
                    }
                ]
            },
            {
                key: 'bubbleOutdate',
                type: 'Input',
                ui: {
                    label: '有效期(天, -1永久)',
                    required: true
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 4',
                        set: {
                            status: 'hidden'
                        }
                    }
                ]
            },
            {
                key: 'privilege',
                type: 'CheckboxAll',
                ui: {
                    label: '称号特权',
                    required: true
                },
                options: [
                    {
                        name: '聊天勋章',
                        value: 0
                    },
                    {
                        name: '用户卡片展示',
                        value: 1
                    },
                    {
                        name: '进场特效',
                        value: 2
                    }
                ],
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 2',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        type: 'array',
                        required: true,
                        message: '请至少选择一个展示'
                    }
                ]
            },
            {
                key: 'bagId',
                type: 'InputNumber',
                ui: {
                    label: '背包id',
                    required: true
                },
                props: {
                    placeholder: '>=1整数',
                    min: 1,
                    step: 1,
                    formatter: limitPositiveInts,
                    parser: limitPositiveInts,
                    style: {
                        width: '200px'
                    }
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 6',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请输入背包id'
                    }
                ]
            },
            {
                key: 'bagCount',
                type: 'InputNumber',
                ui: {
                    label: '数量',
                    required: true
                },
                props: {
                    placeholder: '1至100000之间的整数',
                    min: 1,
                    step: 1,
                    max: 100000,
                    formatter: limitPositiveInts,
                    parser: limitPositiveInts,
                    style: {
                        width: '200px'
                    }
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 6',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请输入礼物数量'
                    }
                ]
            },
            {
                key: 'carId',
                type: 'InputNumber',
                ui: {
                    label: '座驾id',
                    required: true
                },
                props: {
                    placeholder: '>=1整数',
                    min: 1,
                    step: 1,
                    formatter: limitPositiveInts,
                    parser: limitPositiveInts,
                    style: {
                        width: '200px'
                    }
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 5',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请输入座驾id'
                    }
                ]
            },
            {
                key: 'carOutdate',
                type: 'InputNumber',
                ui: {
                    label: '有效期(天)(永久填-1)',
                    required: true
                },
                props: {
                    placeholder: '1至10000之间的整数或-1',
                    min: -1,
                    step: 1,
                    max: 10000,
                    formatter: limitSpecialInts,
                    parser: limitSpecialInts,
                    style: {
                        width: '200px'
                    }
                },
                listeners: [
                    {
                        watch: ['type'],
                        condition: 'type.value != 5',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请输入有效期'
                    }
                ]
            }
        ]
    }
];

export default function() {
    const formRef = useRef(null);
    const [status, setStatus] = useState(null);
    const [values, setValues] = useState(null);

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

    const onAdd = () => {
        batch(() => {
            // formRef.current.reset();
            setValues(null);
            setStatus('edit');
        });
    };

    const onReset = () => {
        batch(() => {
            setValues({...defaultValues});
            setStatus('edit');
        });
    };

    const onView = () => {
        batch(() => {
            setValues({...defaultValues});
            setStatus('preview');
        });
    };

    return (
        <>
            <XForm
                className={'test'}
                ref={formRef}
                schema={schema}
                status={status}
                values={values}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
            />
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    marginBottom: '60px'
                }}
            >
                <Button type="primary" onClick={onSubmit}>
                    提交
                </Button>
                <Button style={{ marginLeft: '10px' }} onClick={onAdd}>
                    新建
                </Button>
                <Button style={{ marginLeft: '10px' }} onClick={onReset}>
                    编辑
                </Button>
                <Button style={{ marginLeft: '10px' }} onClick={onView}>
                    查看详情
                </Button>
            </div>
        </>
    );
}
