import { ComponentMetadata } from '@alilc/lowcode-types';
import snippets from './snippets';

const Login2Meta: ComponentMetadata = {
  componentName: 'Login2',
  title: '登录 2.0',
  docUrl: '',
  screenshot: '',
  category: '表单',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.0',
    exportName: 'Login2',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [],
  configure: {
    props: [
      {
        title: {
          label: '登录方式配置',
        },
        type: 'group',
        display: 'block',
        items: [
          {
            name: 'config.loginMethods',
            title: { label: '登录方式列表' },
            propType: 'array',
            isRequired: true,
            description: '数组顺序决定显示顺序，第一项为默认登录方式',
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          name: 'type',
                          title: '登录方式类型',
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                { label: '邮箱', value: 'email' },
                                { label: '手机', value: 'phone' },
                                { label: 'Google', value: 'google' },
                                { label: 'Facebook', value: 'facebook' },
                                { label: 'Apple', value: 'apple' },
                                { label: '游客', value: 'guest' },
                              ],
                            },
                          },
                          isRequired: true,
                        },
                        {
                          name: 'verificationMethods',
                          title: '验证方式（邮箱/手机）',
                          description: '仅对邮箱/手机登录有效，第一项为默认方式',
                          setter: {
                            componentName: 'ArraySetter',
                            props: {
                              itemSetter: {
                                componentName: 'SelectSetter',
                                props: {
                                  options: [
                                    { label: '密码', value: 'password' },
                                    { label: '验证码', value: 'verification_code' },
                                  ],
                                },
                              },
                            },
                          },
                        },
                        {
                          name: 'stepByStep',
                          title: '分步骤登录（密码）',
                          description: '启用后，密码登录将分为两步：先输入账号，再输入密码',
                          setter: 'BoolSetter',
                          defaultValue: false,
                        },
                        {
                          name: 'clientId',
                          title: 'Client ID（三方登录）',
                          description: 'Google/Apple 的 Client ID',
                          setter: 'StringSetter',
                        },
                        {
                          name: 'appId',
                          title: 'App ID（Facebook）',
                          description: 'Facebook 的 App ID',
                          setter: 'StringSetter',
                        },
                      ],
                    },
                  },
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: 'UI 配置',
        },
        type: 'group',
        display: 'block',
        items: [
          {
            name: 'config.ui.logo',
            title: { label: 'Logo' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'show',
                      title: '显示 Logo',
                      setter: 'BoolSetter',
                      defaultValue: true,
                    },
                    {
                      name: 'url',
                      title: 'Logo 图片',
                      setter: 'ImageSetter',
                    },
                    {
                      name: 'size',
                      title: 'logo 尺寸',
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              { name: 'width', title: '宽度', setter: 'StringSetter' },
                              { name: 'height', title: '高度', setter: 'StringSetter' },
                            ],
                          },
                        },
                      },
                    },
                    {
                      name: 'position',
                      title: '位置',
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            { label: '居左', value: 'left' },
                            { label: '居中', value: 'center' },
                            { label: '居右', value: 'right' },
                          ],
                        },
                      },
                      defaultValue: 'center',
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'config.ui.title',
            title: { label: '欢迎语' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'show',
                      title: '显示',
                      setter: 'BoolSetter',
                      defaultValue: true,
                    },
                    {
                      name: 'text',
                      title: '文案',
                      setter: 'PisellI18nSetter',
                    },
                    {
                      name: 'align',
                      title: '对齐方式',
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            { label: '居左', value: 'left' },
                            { label: '居中', value: 'center' },
                            { label: '居右', value: 'right' },
                          ],
                        },
                      },
                      defaultValue: 'center',
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'config.ui.subtitle',
            title: { label: '标题' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'show',
                      title: '显示',
                      setter: 'BoolSetter',
                      defaultValue: true,
                    },
                    {
                      name: 'text',
                      title: '文案',
                      setter: 'PisellI18nSetter',
                    },
                    {
                      name: 'align',
                      title: '对齐方式',
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            { label: '居左', value: 'left' },
                            { label: '居中', value: 'center' },
                            { label: '居右', value: 'right' },
                          ],
                        },
                      },
                      defaultValue: 'center',
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'config.ui.desc',
            title: { label: '副标题' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'show',
                      title: '显示',
                      setter: 'BoolSetter',
                      defaultValue: false,
                    },
                    {
                      name: 'text',
                      title: '文案',
                      setter: 'PisellI18nSetter',
                      defaultValue: 'Welcome back! Please enter your details.',
                    },
                    {
                      name: 'align',
                      title: '对齐方式',
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            { label: '居左', value: 'left' },
                            { label: '居中', value: 'center' },
                            { label: '居右', value: 'right' },
                          ],
                        },
                      },
                      defaultValue: 'center',
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'config.ui.formLabels',
            title: { label: '表单标签配置' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'email',
                      title: '邮箱标签',
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'show',
                                title: '显示标签',
                                setter: 'BoolSetter',
                                defaultValue: true,
                              },
                              {
                                name: 'text',
                                title: '标签文案',
                                setter: 'PisellI18nSetter',
                              },
                            ],
                          },
                        },
                      },
                    },
                    {
                      name: 'phone',
                      title: '手机标签',
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'show',
                                title: '显示标签',
                                setter: 'BoolSetter',
                                defaultValue: true,
                              },
                              {
                                name: 'text',
                                title: '标签文案',
                                setter: 'PisellI18nSetter',
                              },
                            ],
                          },
                        },
                      },
                    },
                    {
                      name: 'password',
                      title: '密码标签',
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'show',
                                title: '显示标签',
                                setter: 'BoolSetter',
                                defaultValue: true,
                              },
                              {
                                name: 'text',
                                title: '标签文案',
                                setter: 'PisellI18nSetter',
                              },
                            ],
                          },
                        },
                      },
                    },
                    {
                      name: 'verificationCode',
                      title: '验证码标签',
                      setter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [
                              {
                                name: 'show',
                                title: '显示标签',
                                setter: 'BoolSetter',
                                defaultValue: true,
                              },
                              {
                                name: 'text',
                                title: '标签文案',
                                setter: 'PisellI18nSetter',
                              },
                            ],
                          },
                        },
                      },
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'config.ui.themeColor',
            title: { label: '主题色' },
            propType: 'string',
            defaultValue: '#7F56D9',
            setter: 'ColorSetter',
          },
        ],
      },
      {
        title: {
          label: '其他配置',
        },
        type: 'group',
        display: 'block',
        items: [
          {
            name: 'config.channel',
            title: { label: '渠道标识' },
            propType: 'string',
            setter: 'StringSetter',
            description: '用于区分不同来源的登录请求',
          },
          {
            name: 'config.legalTerms',
            title: { label: '法律条款设置' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'enabled',
                      title: '启用法律条款',
                      setter: 'BoolSetter',
                      defaultValue: false,
                      description: '是否在页面底部显示法律条款',
                    },
                    {
                      name: 'terms',
                      title: '法律条款列表',
                      propType: 'array',
                      setter: {
                        componentName: 'ArraySetter',
                        props: {
                          itemSetter: {
                            componentName: 'ObjectSetter',
                            props: {
                              config: {
                                items: [
                                  {
                                    name: 'name',
                                    title: '条款名称',
                                    propType: 'string',
                                    setter: 'StringSetter',
                                    isRequired: true,
                                    description: '如：服务条款、隐私协议',
                                  },
                                  {
                                    name: 'url',
                                    title: '条款链接',
                                    propType: 'string',
                                    setter: 'StringSetter',
                                    isRequired: true,
                                    description: '条款文档的完整URL',
                                  },
                                ],
                              },
                            },
                          },
                        },
                      },
                      description: '配置需要显示的法律条款',
                    },
                    {
                      name: 'textTemplate',
                      title: '文本模板',
                      propType: 'string',
                      setter: 'StringSetter',
                      description: '自定义显示文本，使用 {terms} 占位符表示条款链接',
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'visible',
            title: { label: '显示组件' },
            propType: 'bool',
            defaultValue: true,
            setter: 'BoolSetter',
          },
          {
            name: 'className',
            title: { label: '自定义类名' },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
      {
        title: {
          label: '邮件链接验证',
        },
        type: 'group',
        display: 'block',
        items: [
          {
            name: 'config.emailLinkVerification',
            title: { label: '邮件链接验证模式' },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'enabled',
                      title: '启用验证模式',
                      setter: 'BoolSetter',
                      defaultValue: false,
                      description: '从邮件链接跳转过来时启用此模式（用于重置密码）',
                    },
                    {
                      name: 'code',
                      title: '验证码',
                      setter: 'StringSetter',
                      description: '从 URL 参数中获取的 code（如：602ec2dc2ab8954b2b7bc63a5d920662）',
                    },
                  ],
                },
              },
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onLogin',
          description: '登录回调，参数：(data: LoginFormData, method: AuthMethodType, channel?: string)',
        },
        {
          name: 'onOAuthLogin',
          description: '三方登录回调，参数：(provider: "google" | "facebook" | "apple", channel?: string)',
        },
        {
          name: 'onSendVerificationCode',
          description: '发送验证码回调，参数：(account: string, type: "email" | "phone", channel?: string)',
        },
        {
          name: 'onForgotPassword',
          description: '忘记密码回调，参数：(account: string, channel?: string)',
        },
        {
          name: 'onClose',
          description: '关闭组件回调',
        },
      ],
    },
    component: {
      isContainer: false,
    },
  },
};

export default {
  ...Login2Meta,
  snippets,
};