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

const TabCardMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellCards.TabCard',
  title: '标签卡片',
  category: '基础组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellCards',
    main: 'src/index.tsx',
    destructuring: true,
    subName: 'TabCard',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic',
            'zh-CN': '基础',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'tabKey',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Tab Key',
                'zh-CN': '标签标识',
              },
              tip: 'tabKey | 标签唯一标识，必填',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'number'],
            },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
            isRequired: true,
          },
          {
            name: 'label',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Label',
                'zh-CN': '标签文本',
              },
              tip: 'label | 标签显示的文本内容，必填',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'node'],
            },
            setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
            isRequired: true,
          },
          {
            name: 'icon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Icon',
                'zh-CN': '图标',
              },
              tip: 'icon | 标签图标',
            },
            propType: {
              type: 'oneOfType',
              value: ['node'],
            },
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [
                  {
                    componentName: 'Icon',
                    props: {
                      type: 'AppstoreOutlined',
                      size: 16,
                    },
                  },
                ],
              },
            },
          },
          {
            name: 'direction',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Direction',
                'zh-CN': '布局方向',
              },
              tip: 'direction | 图标和文本的布局方向',
            },
            propType: {
              type: 'oneOf',
              value: ['horizontal', 'vertical'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '水平',
                      value: 'horizontal',
                    },
                    {
                      title: '垂直',
                      value: 'vertical',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'horizontal',
          },
          {
            name: 'size',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Size',
                'zh-CN': '尺寸',
              },
              tip: 'size | 标签尺寸',
            },
            propType: {
              type: 'oneOf',
              value: ['small', 'medium', 'large'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '小',
                      value: 'small',
                    },
                    {
                      title: '中',
                      value: 'medium',
                    },
                    {
                      title: '大',
                      value: 'large',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'medium',
          },
          {
            name: 'className',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'ClassName',
                'zh-CN': '样式类名',
              },
              tip: 'className | 自定义样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
      {
        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: 'count',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Count',
                          'zh-CN': '徽章数字',
                        },
                        tip: '徽章显示的数字或文本',
                      },
                      propType: {
                        type: 'oneOfType',
                        value: ['string', 'number'],
                      },
                      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
                    },
                    {
                      name: 'dot',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Dot',
                          'zh-CN': '小红点',
                        },
                        tip: '是否显示小红点',
                      },
                      propType: 'bool',
                      setter: 'BoolSetter',
                    },
                    {
                      name: 'color',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Color',
                          'zh-CN': '颜色',
                        },
                        tip: '徽章颜色',
                      },
                      propType: 'string',
                      setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'offset',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Offset',
                          'zh-CN': '偏移位置',
                        },
                        tip: '徽章偏移位置 [x, y]',
                      },
                      propType: 'object',
                      setter: 'JsonSetter',
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        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.label}</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(tabKey, event, ${extParams}){\n// 点击标签时的回调\nconsole.log(\'onClick\', tabKey, event);\n}',
        },
      ],
    },
    component: {
      isContainer: false,
    },
  },
};

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