
import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { customStyleConfigure, commonLayoutProps } from '../common'

const ImageMeta: IPublicTypeComponentMetadata = {
  "componentName": "Image",
  "title": "Image",
  "docUrl": "",
  "screenshot": "",
  "devMode": "proCode",
  "npm": {
    "package": "lowcode_dynamic",
    "version": "0.2.1",
    "exportName": "Image",
    "main": "src/index.tsx",
    "destructuring": true,
    "subName": ""
  },
  "configure": {
    "props": [
      {
        name: 'base',
        type: 'group',
        display: 'block',
        title: {
          label: '基础',
        },
        items: [
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Image Address",
                "zh-CN": "图片链接"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": '属性: src | 说明: 图片链接',
                "en_US": 'prop: src | description: image address',
              },
            },
            "name": "src",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false,
              "initialValue": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg"
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Placeholder",
                "zh-CN": "占位图"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": 'A static image to display while loading the image source.',
                "en_US": 'A static image to display while loading the image source.',
              },
            },
            "name": "placeholder",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Error",
                "zh-CN": "错误图"
              },
            },
            "name": "error",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "PlaceholderColor",
                "zh-CN": "占位图颜色值"
              },
            },
            "name": "placeholderColor",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "TintColor",
                "zh-CN": "着色值"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": 'Changes the color of all non-transparent pixels to the tintColor',
                "en_US": 'Changes the color of all non-transparent pixels to the tintColor',
              },
            },
            "name": "tintColor",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "ResizeMode",
                "zh-CN": "ResizeMode"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": "Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover",
                "en_US": "Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover",
              },
            },
            "name": "resizeMode",
            "setter": {
              componentName: 'SelectSetter',
              defaultValue: "cover",
              props: {
                options: [
                  {
                    title: 'cover',
                    value: 'cover',
                  },
                  {
                    title: 'contain',
                    value: 'contain',
                  },
                  {
                    title: 'stretch',
                    value: 'stretch',
                  },
                  {
                    title: 'center',
                    value: 'center',
                  }
                ],
              },
            }
          },
          {...commonLayoutProps},
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Click Event",
                "zh-CN": "点击事件"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": '属性: click | 说明: 点击事件',
                "en_US": 'prop: click | description: click event',
              },
            },
            "name": "click",
            "setter": {
              "componentName": "MixedSetter",
              "isRequired": false,
              props: {
                setters: [
                  'StringSetter',
                  'VariableSetter',
                ],
              }
            }
          },
        ]
      },
      {
        name: 'report',
        type: 'group',
        display: 'block',
        title: {
          label: '打点',
        },
        items:[
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Report Show Name",
                "zh-CN": "曝光埋点名称"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": '属性: report show name | 说明: 曝光埋点名称',
                "en_US": 'prop: report show name | description: report show name',
              },
            },
            "name": "reportShowName",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false,
              "initialValue": ""
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Report Show Data",
                "zh-CN": "曝光埋点数据"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": '属性: report show data | 说明: 曝光埋点数据',
                "en_US": 'prop: report show data | description: report show data',
              },
            },
            "name": "reportShowData",
            setter: [
              {
                componentName: 'JsonSetter',
              },
              {
                componentName: 'VariableSetter',
              },
            ],
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Report Click Name",
                "zh-CN": "点击埋点名称"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": '属性: report click name | 说明: 点击埋点名称',
                "en_US": 'prop: report click name | description: report click name',
              },
            },
            "name": "reportClickName",
            "setter": {
              "componentName": "StringSetter",
              "isRequired": false,
              "initialValue": ""
            }
          },
          {
            "title": {
              "label": {
                "type": "i18n",
                "en-US": "Report Click Data",
                "zh-CN": "点击埋点数据"
              },
              "tip": {
                "type": 'i18n',
                "zh_CN": '属性: report click data | 说明: 点击埋点数据',
                "en_US": 'prop: report click data | description: report click data',
              },
            },
            "name": "reportClickData",
            setter: [
              {
                componentName: 'JsonSetter',
              },
              {
                componentName: 'VariableSetter',
              },
            ],
          }
        ]
      },
      {
        ...customStyleConfigure
      },
      {
        name: 'extend',
        type: 'group',
        display: 'block',
        title: {
          label: '',
        },
        items: [
          {
            name: 'typeConversion',
            title: '类型转化',
            isRequired: true,
            setter: {
              componentName: 'SelectSetter',
              "initialValue": "Image",
              props: {
                options: [
                  {
                    title: 'Div',
                    value: 'Box',
                  },
                  {
                    title: 'Image',
                    value: 'Image',
                  },
                  {
                    title: 'Text',
                    value: 'NextText',
                  },
                ]
              }
            }
          }
        ]
      },
    ],
    "supports": {
      "style": true,
      "className": false,
      events: ['onClick'],
    },
    "component": {},
    "icon": 'https://img.alicdn.com/imgextra/i3/O1CN01tnhXhk1GUIFhsXwzA_!!6000000000625-55-tps-56-56.svg',
    "category": '基础元素',
    "group": '基础组件',
  }
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '图片',
    screenshot:
      'https://img.alicdn.com/imgextra/i3/O1CN01tnhXhk1GUIFhsXwzA_!!6000000000625-55-tps-56-56.svg',
    schema: {
      title: '图片',
      componentName: 'Image',
      props: {
        src: 'https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg',
      },
    },
  },
];

export default {
  ...ImageMeta,
  snippets
};
