import * as React from 'react';
import { createElement } from "react";
import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { customStyleConfigure, commonLayoutProps } from '../common'

const BoxMeta: IPublicTypeComponentMetadata = {
  "componentName": "Box",
  "title": "Box",
  "docUrl": "",
  "screenshot": "",
  icon: 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png',
  "devMode": "proCode",
  "npm": {
    "package": "lowcode_dynamic",
    "version": "0.2.1",
    "exportName": "Box",
    "main": "src/index.tsx",
    "destructuring": true,
    "subName": ""
  },
  "configure": {
    "props": [
      {
        ...commonLayoutProps
      },
      {
        name: 'base',
        type: "group",
        display: 'block',
        title: {
          label: '基础',
        },
        items: [
          {
            "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": "Box",
              props: {
                options: [
                  {
                    title: 'Div',
                    value: 'Box',
                  },
                  {
                    title: 'Image',
                    value: 'Image',
                  },
                  {
                    title: 'Text',
                    value: 'NextText',
                  },
                ]
              }
            }
          }
        ]
      }
    ],
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      loop: false,
      events: ['onClick'],
    },
    category: '基础元素',
    group: '基础组件',
  }
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: 'Box',
    screenshot:
      'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png',
    schema: {
      componentName: 'Box',
      props: {},
    },
  },
];

export default {
  ...BoxMeta,
  snippets
};