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

const YCAvatarMeta: IPublicTypeComponentMetadata = {
  componentName: 'YCAvatar',
  title: 'YCAvatar',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  priority: 1,
  npm: {
    package: 'yc-material',
    version: '0.1.0',
    exportName: 'YCAvatar',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'className',
            'zh-CN': 'className',
          },
        },
        name: 'className',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'StringSetter',
                isRequired: false,
                initialValue: '',
              },
              {
                componentName: 'ArraySetter',
                props: {
                  itemSetter: {
                    componentName: 'StringSetter',
                    isRequired: false,
                    initialValue: '',
                  },
                },
                initialValue: [],
              },
            ],
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'shape',
            'zh-CN': '形状，',
          },
          tip: 'shape | 头像的形状，有圆形(circle)和正方形(square)两种',
        },
        name: 'shape',
        description: '头像的形状，有圆形(circle)和正方形(square)两种',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: 'circle',
                value: 'circle',
              },
              {
                label: 'square',
                value: 'square',
              },
            ],
          },
          initialValue: 'circle',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'size',
            'zh-CN': '尺寸',
          },
          tip: 'size | 头像的尺寸大小，单位是 `px`',
        },
        name: 'size',
        description: '头像的尺寸大小，单位是 `px`',
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 40,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'autoFixFontSize',
            'zh-CN': '字体自适应',
          },
          tip: 'autoFixFontSize | 是否自动根据头像尺寸调整字体大小。',
        },
        name: 'autoFixFontSize',
        description: '是否自动根据头像尺寸调整字体大小。',
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: true,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'triggerIcon',
            'zh-CN': '可点击',
          },
          tip: 'triggerIcon | 可点击的头像交互图标。',
        },
        name: 'triggerIcon',
        description: '可点击的头像交互图标。',
        setter: {
          componentName: 'SlotSetter',
          props: {
            mode: 'node',
          },
          isRequired: false,
          initialValue: {
            type: 'JSSlot',
            value: [],
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'triggerIconStyle',
            'zh-CN': '交互样式',
          },
          tip: 'triggerIconStyle | 交互图标的样式',
        },
        name: 'triggerIconStyle',
        description: '交互图标的样式',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              extraSetter: {
                componentName: 'MixedSetter',
                isRequired: false,
                props: {},
              },
            },
          },
          isRequired: false,
          initialValue: {},
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'triggerType',
            'zh-CN': '交互类型',
          },
          tip: 'triggerType | 可点击的头像交互类型。',
        },
        name: 'triggerType',
        description: '可点击的头像交互类型。',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: 'button',
                value: 'button',
              },
              {
                label: 'mask',
                value: 'mask',
              },
            ],
          },
          initialValue: 'button',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'onClick',
            'zh-CN': '点击回调',
          },
          tip: 'onClick | 点击回调',
        },
        name: 'onClick',
        description: '点击回调',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '头像',
    screenshot: '',
    schema: {
      componentName: 'YCAvatar',
      props: {
        style: { backgroundColor: '#3370ff' },
      },
    },
  },
];

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