import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import snippets from './snippets';

const loginAndRegisterMeta: IPublicTypeComponentMetadata = {
    componentName: 'loginAndRegister',
    title: '登录注册',
    docUrl: '',
    screenshot: '',
    category: '表单',
    devMode: 'proCode',
    npm: {
        package: '@pisell/materials',
        version: '1.0.0',
        exportName: 'loginAndRegister',
        main: 'src/index.tsx',
        destructuring: true,
        subName: ''
    },
    props: [
        {
            name: 'logo',
            title: 'Logo',
            propType: 'node'
        },
        {
            name: 'onLogin',
            title: '登录回调',
            propType: 'func'
        },
        {
            name: 'backgroundImage',
            title: { label: '背景图片', tip: '左侧背景图片' },
            propType: 'string',
            setter: 'ImageSetter'
        }
    ],
    configure: {
        props: [
            {
                title: {
                    label: 'LoginHeader'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'showLogo',
                        title: { label: '显示Logo' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        name: 'logo',
                        title: { label: 'Logo图片' },
                        propType: 'string',
                        setter: 'ImageSetter'
                    },
                    {
                        name: 'logoPosition',
                        title: { label: 'Logo位置' },
                        setter: {
                            componentName: 'RadioGroupSetter',
                            props: {
                                options: [
                                    { label: '原左', value: 'left' },
                                    { label: '居中', value: 'center' },
                                    { label: '原右', value: 'right' }
                                ]
                            }
                        },
                        defaultValue: 'center'
                    },
                    {
                        name: 'logoSize',
                        title: { label: 'Logo尺寸' },
                        propType: 'object',
                        display: 'inline',
                        setter: {
                            componentName: 'ObjectSetter',
                            props: {
                                config: {
                                    items: [
                                        {
                                            name: 'width',
                                            title: '宽度',
                                            setter: 'NumberSetter'
                                        },
                                        {
                                            name: 'height',
                                            title: '高度',
                                            setter: 'NumberSetter'
                                        }
                                    ]
                                }
                            }
                        }
                    }
                ]
            },
            {
                title: {
                    label: '标题文案'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'showTitle',
                        title: { label: '显示标题' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        name: 'title',
                        title: { label: '标题文案' },
                        propType: 'string',
                        setter: 'PisellI18nSetter',
                    },
                    {
                        name: 'titleAlign',
                        title: { label: '位置' },
                        setter: {
                            componentName: 'RadioGroupSetter',
                            props: {
                                options: [
                                    { label: '原左', value: 'left' },
                                    { label: '居中', value: 'center' },
                                    { label: '原右', value: 'right' }
                                ]
                            }
                        }
                    }
                ]
            },
            {
                title: {
                    label: '副标题文案'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'showSubtitle',
                        title: { label: '显示副标题' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        name: 'subtitle',
                        title: { label: '副标题文案' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'subtitleAlign',
                        title: { label: '位置' },
                        setter: {
                            componentName: 'RadioGroupSetter',
                            props: {
                                options: [
                                    { label: '原左', value: 'left' },
                                    { label: '居中', value: 'center' },
                                    { label: '原右', value: 'right' }
                                ]
                            }
                        }
                    }
                ]
            },
            {
                title: {
                    label: '登录/注册Tabs'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'showTabs',
                        title: { label: '显示Tabs' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        name: 'loginTabText',
                        title: { label: '登录文案' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'registerTabText',
                        title: { label: '注册文案' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    }
                ]
            },
            {
                title: {
                    label: 'LoginForm'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'loginMethods',
                        title: { label: '其他登录方式' },
                        propType: 'array',
                        setter: {
                            componentName: 'ArraySetter',
                            props: {
                                itemSetter: {
                                    componentName: 'SelectSetter',
                                    props: {
                                        options: [
                                            { label: '手机号', value: 'phone' },
                                            { label: '谷歌登录', value: 'google' },
                                            { label: 'Facebook登录', value: 'facebook' },
                                            { label: 'Apple登录', value: 'apple' }
                                        ]
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: 'position',
                        title: { label: '位置' },
                        setter: {
                            componentName: 'SelectSetter',
                            props: {
                                options: [
                                    { label: '默认', value: 'default' },
                                    { label: '其他登录方式', value: 'other' }
                                ]
                            }
                        }
                    },
                    {
                        name: 'emailPlaceholder',
                        title: { label: '邮箱输入提示' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'passwordPlaceholder',
                        title: { label: '密码输入提示' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'buttonText',
                        title: { label: '按钮文本' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'showRememberMe',
                        title: { label: '记住密码' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        name: 'showForgotPassword',
                        title: { label: '忘记密码' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        name: 'rememberMeText',
                        title: { label: '记住密码文案' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'forgotPasswordText',
                        title: { label: '忘记密码文案' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'socialLoginTexts',
                        title: { label: '社交登录文案' },
                        propType: 'object',
                        setter: {
                            componentName: 'ObjectSetter',
                            props: {
                                config: {
                                    items: [
                                        {
                                            name: 'google',
                                            title: '谷歌登录文本',
                                            setter: {
                                                componentName: 'PisellI18nSetter'
                                            }
                                        },
                                        {
                                            name: 'facebook',
                                            title: 'Facebook登录文本',
                                            setter: {
                                                componentName: 'PisellI18nSetter'
                                            }
                                        },
                                        {
                                            name: 'apple',
                                            title: 'Apple登录文本',
                                            setter: {
                                                componentName: 'PisellI18nSetter'
                                            }
                                        }
                                    ]
                                }
                            }
                        }
                    },
                    {
                        name: 'emailLabel',
                        title: { label: '邮箱标题' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'passwordLabel',
                        title: { label: '密码标题' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    }
                ]
            },
            {
                title: {
                    label: '注册表单'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'registerEmailPlaceholder',
                        title: { label: '邮箱输入提示' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'registerPasswordPlaceholder',
                        title: { label: '密码输入提示' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    },
                    {
                        name: 'registerButtonText',
                        title: { label: '注册按钮文本' },
                        propType: {
                            type: "oneOfType",
                            value: ["node", "string"],
                        },
                        setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
                    }
                ]
            },
            {
                title: {
                    label: 'LoginFooter'
                },
                type: 'group',
                display: 'block',
                items: [
                    {
                        name: 'showFooter',
                        title: { label: '显示页脚' },
                        propType: 'bool',
                        defaultValue: true,
                        setter: 'BoolSetter'
                    },
                    {
                        title: {
                            label: '注册入口'
                        },
                        type: 'group',
                        display: 'block',
                        items: [
                            {
                                name: 'showSignUp',
                                title: { label: '显示注册入口' },
                                propType: 'bool',
                                defaultValue: true,
                                setter: 'BoolSetter'
                            },
                            {
                                name: 'signUpText',
                                title: { label: '注册文案' },
                                propType: {
                                    type: 'oneOfType',
                                    value: ['string', 'object']
                                },
                                setter: {
                                    componentName: 'PisellI18nSetter'
                                }
                            },
                            {
                                name: 'signUpPosition',
                                title: { label: '位置' },
                                setter: {
                                    componentName: 'RadioGroupSetter',
                                    props: {
                                        options: [
                                            { label: '原左', value: 'left' },
                                            { label: '居中', value: 'center' },
                                            { label: '原右', value: 'right' }
                                        ]
                                    }
                                },
                                defaultValue: 'center'
                            }
                        ]
                    },
                    {
                        title: {
                            label: '其他入口'
                        },
                        type: 'group',
                        display: 'block',
                        items: [
                            {
                                name: 'otherLinks',
                                title: { label: '其他入口' },
                                propType: 'array',
                                setter: {
                                    componentName: 'ArraySetter',
                                    props: {
                                        itemSetter: {
                                            componentName: 'ObjectSetter',
                                            props: {
                                                config: {
                                                    items: [
                                                        {
                                                            name: 'text',
                                                            title: '文案',
                                                            setter: {
                                                                componentName: 'PisellI18nSetter'
                                                            }
                                                        },
                                                        {
                                                            name: 'url',
                                                            title: '链接',
                                                            setter: 'StringSetter'
                                                        }
                                                    ]
                                                }
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: 'otherLinksPosition',
                                title: { label: '位置' },
                                setter: {
                                    componentName: 'RadioGroupSetter',
                                    props: {
                                        options: [
                                            { label: '原左', value: 'left' },
                                            { label: '居中', value: 'center' },
                                            { label: '原右', value: 'right' }
                                        ]
                                    }
                                },
                                defaultValue: 'center'
                            }
                        ]
                    }
                ]
            }
        ],
        supports: {
            style: true,
            events: [
                {
                    name: 'onLogin',
                    description: '点击登录按钮时的回调'
                },
                {
                    name: 'onSocialLogin',
                    description: '点击社交登录按钮时的回调'
                },
                {
                    name: 'onRegister',
                    description: '点击注册按钮时的回调'
                }
            ]
        },
        component: {
            isContainer: false
        }
    }
};

export default {
    ...loginAndRegisterMeta,
    snippets
};