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

const TextCardMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellCards.TextCard',
  title: '文本卡片',
  category: '基础组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellCards',
    main: 'src/index.tsx',
    destructuring: true,
    subName: 'TextCard',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic',
            'zh-CN': '基础',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'text',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Text',
                'zh-CN': '文本内容',
              },
              tip: 'text | 卡片显示的文本内容，必填',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'node'],
            },
            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
            isRequired: true,
          },
          {
            name: 'variant',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Variant',
                'zh-CN': '样式变体',
              },
              tip: 'variant | 卡片样式变体',
            },
            propType: {
              type: 'oneOf',
              value: ['text', 'filled', 'outlined', 'light', 'gradient', 'dashed'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: '纯文本',
                      value: 'text',
                    },
                    {
                      title: '填充背景',
                      value: 'filled',
                    },
                    {
                      title: '描边',
                      value: 'outlined',
                    },
                    {
                      title: '浅色背景',
                      value: 'light',
                    },
                    {
                      title: '渐变',
                      value: 'gradient',
                    },
                    {
                      title: '虚线',
                      value: 'dashed',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'text',
          },
          {
            name: 'size',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Size',
                'zh-CN': '尺寸',
              },
              tip: 'size | 卡片尺寸',
            },
            propType: {
              type: 'oneOf',
              value: ['small', 'default', 'large'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '小',
                      value: 'small',
                    },
                    {
                      title: '中',
                      value: 'default',
                    },
                    {
                      title: '大',
                      value: 'large',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'default',
          },
          {
            name: 'clickable',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Clickable',
                'zh-CN': '可点击',
              },
              tip: 'clickable | 是否可点击',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'className',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'ClassName',
                'zh-CN': '样式类名',
              },
              tip: 'className | 自定义样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Icon',
            'zh-CN': '图标',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'prefixIcon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Prefix Icon',
                'zh-CN': '前置图标',
              },
              tip: 'prefixIcon | 前置图标',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [
                  {
                    componentName: 'Icon',
                    props: {
                      type: 'BellOutlined',
                      size: 16,
                    },
                  },
                ],
              },
            },
          },
          {
            name: 'suffixIcon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Suffix Icon',
                'zh-CN': '后置图标',
              },
              tip: 'suffixIcon | 后置图标',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [
                  {
                    componentName: 'Icon',
                    props: {
                      type: 'ChevronDownOutlined',
                      size: 16,
                    },
                  },
                ],
              },
            },
          },
          {
            name: 'iconConfig',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Icon Config',
                'zh-CN': '图标配置',
              },
              tip: 'iconConfig | 图标配置',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'size',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Size',
                          'zh-CN': '图标大小',
                        },
                        tip: '图标大小（单位：px）',
                      },
                      propType: 'number',
                      setter: ['NumberSetter', 'VariableSetter'],
                    },
                    {
                      name: 'color',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Color',
                          'zh-CN': '图标颜色',
                        },
                        tip: '图标颜色',
                      },
                      propType: 'string',
                      setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Tag',
            'zh-CN': '标签',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'tag',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Tag',
                'zh-CN': '后置标签',
              },
              tip: 'tag | 后置标签',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [
                  {
                    componentName: 'Tag',
                    props: {
                      children: '标签',
                      color: 'blue',
                    },
                  },
                ],
              },
            },
          },
          {
            name: 'tagConfig',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Tag Config',
                'zh-CN': '标签配置',
              },
              tip: 'tagConfig | 标签配置',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'color',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Color',
                          'zh-CN': '标签颜色',
                        },
                        tip: '标签颜色',
                      },
                      propType: 'string',
                      setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'style',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Style',
                          'zh-CN': '标签样式',
                        },
                        tip: '标签自定义样式',
                      },
                      propType: 'object',
                      setter: 'StyleSetter',
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Badge',
            'zh-CN': '角标',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'badge',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Badge Config',
                'zh-CN': '角标配置',
              },
              tip: 'badge | 角标配置对象',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'type',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Type',
                          'zh-CN': '角标类型',
                        },
                        tip: '角标类型',
                      },
                      propType: {
                        type: 'oneOf',
                        value: ['dot', 'number', 'text'],
                      },
                      setter: [
                        {
                          componentName: 'RadioGroupSetter',
                          props: {
                            options: [
                              {
                                title: '红点',
                                value: 'dot',
                              },
                              {
                                title: '数字',
                                value: 'number',
                              },
                              {
                                title: '文本',
                                value: 'text',
                              },
                            ],
                          },
                        },
                        'VariableSetter',
                      ],
                      defaultValue: 'dot',
                    },
                    {
                      name: 'content',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Content',
                          'zh-CN': '角标内容',
                        },
                        tip: '角标内容（数字或文本）',
                      },
                      propType: {
                        type: 'oneOfType',
                        value: ['string', 'number', 'node'],
                      },
                      setter: ['StringSetter', 'NumberSetter', 'SlotSetter', 'VariableSetter'],
                    },
                    {
                      name: 'position',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Position',
                          'zh-CN': '角标位置',
                        },
                        tip: '角标位置',
                      },
                      propType: {
                        type: 'oneOf',
                        value: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
                      },
                      setter: [
                        {
                          componentName: 'SelectSetter',
                          props: {
                            options: [
                              {
                                title: '右上',
                                value: 'top-right',
                              },
                              {
                                title: '左上',
                                value: 'top-left',
                              },
                              {
                                title: '右下',
                                value: 'bottom-right',
                              },
                              {
                                title: '左下',
                                value: 'bottom-left',
                              },
                            ],
                          },
                        },
                        'VariableSetter',
                      ],
                      defaultValue: 'top-right',
                    },
                    {
                      name: 'offset',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Offset',
                          'zh-CN': '偏移量',
                        },
                        tip: '角标偏移量 [x, y]',
                      },
                      propType: 'object',
                      setter: 'JsonSetter',
                    },
                    {
                      name: 'color',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Color',
                          'zh-CN': '角标颜色',
                        },
                        tip: '角标颜色',
                      },
                      propType: 'string',
                      setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'style',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Style',
                          'zh-CN': '角标样式',
                        },
                        tip: '角标自定义样式',
                      },
                      propType: 'object',
                      setter: 'StyleSetter',
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Slot',
            'zh-CN': '插槽',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'prefixSlot',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Prefix Slot',
                'zh-CN': '前置插槽',
              },
              tip: 'prefixSlot | 前置插槽（替换前置图标）',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: 'SlotSetter',
          },
          {
            name: 'suffixSlot',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Suffix Slot',
                'zh-CN': '后置插槽',
              },
              tip: 'suffixSlot | 后置插槽（替换后置图标和标签）',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: 'SlotSetter',
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Text Config',
            'zh-CN': '文本配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'textConfig',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Text Config',
                'zh-CN': '文本配置',
              },
              tip: 'textConfig | 文本配置',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'fontSize',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Font Size',
                          'zh-CN': '字体大小',
                        },
                        tip: '字体大小（单位：px）',
                      },
                      propType: 'number',
                      setter: ['NumberSetter', 'VariableSetter'],
                    },
                    {
                      name: 'fontWeight',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Font Weight',
                          'zh-CN': '字体粗细',
                        },
                        tip: '字体粗细',
                      },
                      propType: {
                        type: 'oneOfType',
                        value: ['string', 'number'],
                      },
                      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
                    },
                    {
                      name: 'color',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Color',
                          'zh-CN': '文本颜色',
                        },
                        tip: '文本颜色',
                      },
                      propType: 'string',
                      setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'maxLines',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Max Lines',
                          'zh-CN': '最大行数',
                        },
                        tip: '最大显示行数',
                      },
                      propType: 'number',
                      setter: ['NumberSetter', 'VariableSetter'],
                      defaultValue: 1,
                    },
                    {
                      name: 'ellipsis',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Ellipsis',
                          'zh-CN': '显示省略号',
                        },
                        tip: '是否显示省略号',
                      },
                      propType: 'bool',
                      setter: ['BoolSetter', 'VariableSetter'],
                      defaultValue: true,
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Width Config',
            'zh-CN': '宽度配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'widthMode',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Width Mode',
                'zh-CN': '宽度模式',
              },
              tip: 'widthMode | 宽度模式',
            },
            propType: {
              type: 'oneOf',
              value: ['auto', 'fixed', 'full'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '内容撑满',
                      value: 'auto',
                    },
                    {
                      title: '固定宽度',
                      value: 'fixed',
                    },
                    {
                      title: '撑满父容器',
                      value: 'full',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'auto',
          },
          {
            name: 'width',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Width',
                'zh-CN': '固定宽度',
              },
              tip: 'width | 固定宽度值（widthMode=fixed 时有效）',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'number'],
            },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
          },
          {
            name: 'maxWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Max Width',
                'zh-CN': '最大宽度',
              },
              tip: 'maxWidth | 最大宽度（widthMode=auto 时有效）',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'number'],
            },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
            defaultValue: 400,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'State',
            'zh-CN': '状态',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'active',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Active State',
                'zh-CN': '激活状态',
              },
              tip: 'active | 激活状态配置',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'value',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Is Active',
                          'zh-CN': '是否激活',
                        },
                        tip: '是否处于激活状态',
                      },
                      propType: 'bool',
                      setter: ['BoolSetter', 'VariableSetter'],
                    },
                    {
                      name: 'className',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'ClassName',
                          'zh-CN': '激活类名',
                        },
                        tip: '激活状态下的自定义类名',
                      },
                      propType: 'string',
                      setter: 'StringSetter',
                    },
                    {
                      name: 'style',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Style',
                          'zh-CN': '激活样式',
                        },
                        tip: '激活状态下的自定义样式',
                      },
                      propType: 'object',
                      setter: 'StyleSetter',
                    },
                    {
                      name: 'extra',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Extra',
                          'zh-CN': '额外内容',
                        },
                        tip: '激活状态下的额外渲染内容',
                      },
                      propType: {
                        type: 'oneOfType',
                        value: ['node', 'string', 'number', 'object'],
                      },
                      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'disabled',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Disabled State',
                'zh-CN': '禁用状态',
              },
              tip: 'disabled | 禁用状态配置',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'value',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Is Disabled',
                          'zh-CN': '是否禁用',
                        },
                        tip: '是否处于禁用状态',
                      },
                      propType: 'bool',
                      setter: ['BoolSetter', 'VariableSetter'],
                    },
                    {
                      name: 'className',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'ClassName',
                          'zh-CN': '禁用类名',
                        },
                        tip: '禁用状态下的自定义类名',
                      },
                      propType: 'string',
                      setter: 'StringSetter',
                    },
                    {
                      name: 'style',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Style',
                          'zh-CN': '禁用样式',
                        },
                        tip: '禁用状态下的自定义样式',
                      },
                      propType: 'object',
                      setter: 'StyleSetter',
                    },
                    {
                      name: 'extra',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Extra',
                          'zh-CN': '额外内容',
                        },
                        tip: '禁用状态下的额外渲染内容',
                      },
                      propType: {
                        type: 'oneOfType',
                        value: ['node', 'string', 'number', 'object'],
                      },
                      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
                    },
                  ],
                },
              },
            },
          },
          {
            name: 'loading',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Loading State',
                'zh-CN': '加载状态',
              },
              tip: 'loading | 加载状态配置',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'value',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Is Loading',
                          'zh-CN': '是否加载中',
                        },
                        tip: '是否处于加载状态',
                      },
                      propType: 'bool',
                      setter: ['BoolSetter', 'VariableSetter'],
                    },
                    {
                      name: 'className',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'ClassName',
                          'zh-CN': '加载类名',
                        },
                        tip: '加载状态下的自定义类名',
                      },
                      propType: 'string',
                      setter: 'StringSetter',
                    },
                    {
                      name: 'style',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Style',
                          'zh-CN': '加载样式',
                        },
                        tip: '加载状态下的自定义样式',
                      },
                      propType: 'object',
                      setter: 'StyleSetter',
                    },
                    {
                      name: 'extra',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Extra',
                          'zh-CN': '额外内容',
                        },
                        tip: '加载状态下的额外渲染内容，如 Loading 组件',
                      },
                      propType: {
                        type: 'oneOfType',
                        value: ['node', 'string', 'number', 'object'],
                      },
                      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Advanced',
            'zh-CN': '高级',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'render',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Custom Render',
                'zh-CN': '自定义渲染',
              },
              tip: 'render | 自定义渲染函数，完全控制卡片内容',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'render(props,${extParams}){\n// 自定义渲染卡片内容\nreturn <div>{props.text}</div>;\n}',
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'children',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Children',
                'zh-CN': '子内容',
              },
              tip: 'children | 自定义子内容',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: 'SlotSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onClick',
          template:
            'onClick(event, ${extParams}){\n// 点击卡片时的回调\nconsole.log(\'onClick\', event);\n}',
        },
      ],
    },
    component: {
      isContainer: false,
    },
  },
};

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