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

const EventResourceDisplayMeta: IPublicTypeComponentMetadata = {
  componentName: 'EventResourceDisplay',
  title: '资源展示卡片',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.4',
    exportName: 'EventResourceDisplay',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'mode',
        title: { label: '裁切尺寸', tip: 'mode | 裁切尺寸' },
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              { label: '普通样式', value: 'normal' },
              { label: '角色样式', value: 'role' },
              { label: 'Campus校区', value: 'campus' },
            ],
          },
        },
      },
      {
        title: "字段展示",
        display: "block",
        type: "group",
        items: [
          {
            name: 'showImage',
            title: { label: '显示图像', tip: 'showImage | 显示图像' },
            setter: 'BoolSetter',
          },
          {
            name: 'showTitle',
            title: { label: '显示名称', tip: 'showTitle | 显示名称' },
            setter: 'BoolSetter',
          },
          {
            name: 'showSubtitle',
            title: { label: '显示副标题', tip: 'showSubtitle | 显示副标题' },
            setter: 'BoolSetter',
            condition: (target) => target.getProps().getPropValue('mode') !== 'campus',
          },
          {
            name: 'showLocation',
            title: { label: '显示地址', tip: 'showLocation | 显示地址' },
            setter: 'BoolSetter',
            condition: (target) => target.getProps().getPropValue('mode') === 'campus',
          },
          {
            name: 'showContact',
            title: { label: '显示联系方式', tip: 'showContact | 显示联系方式' },
            setter: 'BoolSetter',
            condition: (target) => target.getProps().getPropValue('mode') === 'campus',
          },
          {
            name: 'showIcon',
            title: { label: '显示字段前icon', tip: 'showIcon | 显示字段前icon' },
            setter: 'BoolSetter',
            condition: (target) => target.getProps().getPropValue('mode') === 'campus',
          },
          {
            name: 'direction',
            title: '展示方向',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { label: '水平', value: 'horizontal' },
                  { label: '垂直', value: 'vertical' },
                ],
              },
            },
            defaultValue: 'horizontal',
          },
        ]
      },
      {
        title: "图像选项",
        display: "block",
        type: "group",
        items: [
          {
            name: 'shape',
            title: '头像形状',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { label: '圆形', value: 'circle' },
                  { label: '方形', value: 'square' },
                ],
              },
            },
            defaultValue: 'circle',
            condition: (target) => target.getProps().getPropValue('mode') !== 'campus',
          },
          {
            name: "size",
            title: { label: "尺寸", tip: "size | 设置头像的大小" },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: 'xs', value: 'xs' },
                  { label: 'sm', value: 'sm' },
                  { label: 'md', value: 'md' },
                  { label: 'lg', value: 'lg' },
                  { label: 'xl', value: 'xl' },
                  { label: 'xxl', value: 'xxl' },
                ],
              },
            },
            defaultValue: "xxl",
            condition: (target) => target.getProps().getPropValue('mode') !== 'campus',
          },
        ]
      },
      {
        name: "useTextAvatar",
        title: { label: "使用文本头像", tip: "useTextAvatar | 是否使用文本作为头像" },
        setter: 'BoolSetter',
        condition: (target) => target.getProps().getPropValue('mode') !== 'campus',
      },
    ],
    supports: {
      style: true,
    },
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '资源显示',
    screenshot: '',
    schema: {
      componentName: 'EventResourceDisplay',
      props: {
        mode: 'normal',
        showImage: true,
        showTitle: true,
        showSubtitle: true,
        showLocation: true,
        showContact: true,
        showIcon: true,
        direction: 'horizontal',
        shape: 'circle',
        size: 'xxl',
        useTextAvatar: false,
      },
    },
  },
];

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