import React from 'react';
import { Bundle } from '@ali/visualengine';
import VisualengineUtils from '@ali/visualengine-utils';
import style from '@ali/vu-style-property';
import uuid from '@ali/vu-uuid-property';
import events from '@ali/vu-events-property';
import { componentName } from 'src/const';
import Icon from './logo';

const { TextSetter, JsonSetter } = VisualengineUtils;

// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
  title: componentName,
  componentName,
  category: '自定义',
  icon: Icon,
  docUrl: '',
  configure: [
    {
      name: 'jsonProps',
      title: '参数',
      display: 'block',
      tip: {
        content: 'JSON格式传入所有参数,可绑定数据源动态修改参数值',
      },
      supportVariable: true,
      initialValue: {},
      setter: <JsonSetter label='编辑参数' />,
    },
    {
      name: 'content',
      title: '子元素内容',
      display: 'block',
      tip: {
        content: '可绑定数据源使用JSX',
      },
      supportVariable: true,
      initialValue: '',
      setter: <TextSetter />,
    },
    style(),
    {
      type: 'group',
      title: '高级',
      display: 'accordion',
      items: [
        uuid(componentName),
        ...events([
          {
            name: 'onClick',
            title: 'onClick 点击按钮',
            initialValue: `/**
 * button onClick
 */
function onClick(){
  console.log('onClick from builder');
}`,
          },
        ]),
      ],
    },
  ],
});