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

const PisellImageCardMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellCards.PisellImageCard',
  title: '图片卡片',
  category: '基础组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellCards',
    main: 'src/index.tsx',
    destructuring: true,
    subName: 'PisellImageCard',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Data Source',
            'zh-CN': '数据源',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'dataSource',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Data Source',
                'zh-CN': '图片数据源',
              },
              tip: 'dataSource | 图片数据源配置对象',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'src',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Image URL',
                          'zh-CN': '图片地址',
                        },
                        tip: '图片地址，支持相对路径和绝对路径',
                      },
                      propType: 'string',
                      setter: ['StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'alt',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Alt Text',
                          'zh-CN': '替换文本',
                        },
                        tip: '图片替换文本，当图片未设置或加载失败时，显示 alt 的前 2 个字符',
                      },
                      propType: 'string',
                      setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'errorSrc',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Error Image',
                          'zh-CN': '失败兜底图',
                        },
                        tip: '图片加载失败后的兜底图地址',
                      },
                      propType: 'string',
                      setter: ['StringSetter', 'VariableSetter'],
                    },
                    {
                      name: 'fallbackSrc',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Placeholder Image',
                          'zh-CN': '占位图',
                        },
                        tip: '首次加载时的占位图地址',
                      },
                      propType: 'string',
                      setter: ['StringSetter', 'VariableSetter'],
                    },
                  ],
                },
              },
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Style',
            'zh-CN': '样式',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'fillMode',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Fill Mode',
                'zh-CN': '填充模式',
              },
              tip: 'fillMode | 图片填充模式',
            },
            propType: {
              type: 'oneOf',
              value: ['cover', 'contain', 'fill', 'none'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '覆盖',
                      value: 'cover',
                    },
                    {
                      title: '包含',
                      value: 'contain',
                    },
                    {
                      title: '拉伸',
                      value: 'fill',
                    },
                    {
                      title: '原始',
                      value: 'none',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'cover',
          },
          {
            name: 'width',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Width',
                'zh-CN': '宽度',
              },
              tip: 'width | 图片宽度，支持任意 CSS 合法值（px、%、rem 等）',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'number'],
            },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
            defaultValue: '100%',
          },
          {
            name: 'height',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Height',
                'zh-CN': '高度',
              },
              tip: 'height | 图片高度，支持任意 CSS 合法值（px、%、rem 等）',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'number'],
            },
            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
            defaultValue: '100%',
          },
          {
            name: 'className',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'ClassName',
                'zh-CN': '样式类名',
              },
              tip: 'className | 自定义样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Advanced',
            'zh-CN': '高级',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'lazy',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Lazy Load',
                'zh-CN': '懒加载',
              },
              tip: 'lazy | 是否启用图片懒加载（仅当图片进入视口时才加载）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        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': 'Children',
            'zh-CN': '子内容',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            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 {
  ...PisellImageCardMeta,
  snippets,
};