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

const ImageMeta: IPublicTypeComponentMetadata = {
  componentName: 'Image',
  title: '图片',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '基础组件',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'Image',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 常用配置
      {
        title: '常用配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            title: {
              label: '动态链接',
              tip: '设置为动态后,文本内容通过筛选动态类型生成',
            },
            name: 'dynamic',
            setter: 'BoolSetter',
          },
          {
            title: {
              label: '动态内容',
              tip: '当前动态数据源名称',
            },
            name: 'dynamicType',
            condition: (target) => {
              return target.parent.getPropValue('dynamic');
            },
            setter: {
              componentName: 'SelectSetter',
              isRequired: false,
              initialValue: 'appIcon',
              props: {
                options: [{ label: '应用图标', value: 'appIcon' }],
              },
            },
          },
          {
            title: {
              label: '图片地址',
              tip: '设置图片的资源路径,支持使用base64格式',
            },
            name: 'url',
            condition: (target) => {
              return !target.parent.getPropValue('dynamic');
            },
            setter: {
              componentName: 'StringSetter',
              isRequired: false,
              initialValue: 'https://img.alicdn.com/tfs/TB10nEur.Y1gK0jSZFCXXcwqXXa-234-230.png',
            },
          },
          {
            title: {
              label: '是否是行内元素',
              tip: '行内元素可以与其他元素保持一行',
            },
            name: 'inline',
            setter: 'BoolSetter',
          },
          {
            title: {
              label: '提醒',
              tip: '设置鼠标移至图片的提示文本',
            },
            name: 'title',
            setter: {
              componentName: 'StringSetter',
              isRequired: false,
              initialValue: '',
            },
          },
          {
            title: {
              label: '代替文本',
              tip: '设置图片渲染失败时的替代文本',
            },
            name: 'alt',
            setter: {
              componentName: 'StringSetter',
              isRequired: false,
              initialValue: '',
            },
          },
          {
            title: {
              label: '摆放位置',
              tip: '设置图片的在容器中的填充状态',
            },
            name: 'position',
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    { title: '无', value: 'none' },
                    { title: '铺满', value: 'cover' },
                    { title: '适合', value: 'contain' },
                    { title: '拉伸', value: 'fill' },
                  ],
                },
              },
            ],
            defaultValue: 'cover',
          },
          {
            title: '样式',
            type: 'group',
            display: 'accordion',
            items: [
              {
                title: '样式',
                name: 'styles',
                display: 'plain',
                setter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          title: {
                            label: '背景颜色',
                            tip: '设置图片的背景颜色',
                          },
                          name: 'backgroundColor',
                          setter: {
                            componentName: 'ColorSetter',
                            isRequired: false,
                            initialValue: 'transparent',
                          },
                        },
                        {
                          title: {
                            label: '宽高设置',
                            tip: '是否开启图片宽高设置',
                          },
                          name: 'widthHeightVisible',
                          setter: {
                            componentName: 'BoolSetter',
                            isRequired: false,
                            initialValue: true,
                          },
                        },
                        {
                          title: {
                            label: '宽度',
                            tip: '设置图片宽度',
                          },
                          name: 'width',
                          setter: {
                            componentName: 'StringSetter',
                            isRequired: false,
                            initialValue: '',
                          },
                        },
                        {
                          title: {
                            label: '高度',
                            tip: '设置图片高度',
                          },
                          name: 'height',
                          setter: {
                            componentName: 'StringSetter',
                            isRequired: false,
                            initialValue: '',
                          },
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    ],
    supports: {
      style: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '图片',
    screenshot: '',
    schema: {
      componentName: 'Image',
      props: {
        url: 'https://img.alicdn.com/tfs/TB10nEur.Y1gK0jSZFCXXcwqXXa-234-230.png',
        inline: false,
        dynamic: false,
        dynamicType: 'appIcon',
      },
    },
  },
];

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