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

const PisellDropSortMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellDropSort',
  title: '拖拽排序',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellDropSort',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      name: 'value',
      propType: 'object',
    },
    {
      name: 'allowDrag',
      propType: 'bool',
      description: '允许拖拽',
      defaultValue: true,
    },
    {
      name: 'allowDelete',
      propType: 'bool',
      description: '允许删除',
      defaultValue: true,
    },
    {
      name: 'allowAddChild',
      propType: 'bool',
      description: '允许添加子节点',
      defaultValue: true,
    },
    {
      name: 'allowAddRoot',
      propType: 'bool',
      description: '允许添加根节点',
      defaultValue: true,
    },
    {
      name: 'disabled',
      propType: 'bool',
      description: '是否禁用',
      defaultValue: false,
    },
    {
      name: 'spacing',
      propType: 'number',
      description: '间距',
      defaultValue: 8,
    },
    {
      name: 'maxLevel',
      propType: 'number',
      description: '最大层级数',
      defaultValue: 3,
    },
    {
      name: 'showBorder',
      propType: 'bool',
      description: '显示边框',
      defaultValue: true,
    },
    {
      name: 'className',
      propType: 'string',
      description: '类名',
    },
    {
      name: 'style',
      propType: 'object',
      description: '样式',
    },
    {
      name: 'onDragEnd',
      propType: 'func',
      description: '拖拽完成回调',
    },
    {
      name: 'onDelete',
      propType: 'func',
      description: '删除节点回调',
    },
    {
      name: 'onAdd',
      propType: 'func',
      description: '添加节点回调',
    },
    {
      name: 'renderItem',
      propType: {
        type: 'func',
      },
      setter: [
        {
          componentName: 'SlotSetter',
          title: '渲染函数插槽',
          initialValue: {
            type: 'JSSlot',
            params: ['option'],
          },
        },
        {
          componentName: 'FunctionSetter',
          props: {
            template:
              'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'leftContent',
      propType: {
        type: 'func',
      },
      description: '左侧自定义内容',
    },
    {
      name: 'rightContent',
      propType: {
        type: 'func',
      },
      description: '右侧自定义内容',
    },
  ],
  configure: {
    props: [
      {
        name: 'value',
        setter: 'JsonSetter',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Data source',
            'zh-CN': '数据源',
          },
        },
      },
      {
        name: 'allowDrag',
        setter: 'BoolSetter',
        defaultValue: true,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Allow drag',
            'zh-CN': '允许拖拽',
          },
        },
      },
      {
        name: 'allowDelete',
        setter: 'BoolSetter',
        defaultValue: true,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Allow delete',
            'zh-CN': '允许删除',
          },
        },
      },
      {
        name: 'allowAddChild',
        setter: 'BoolSetter',
        defaultValue: true,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Allow add child',
            'zh-CN': '允许添加子节点',
          },
        },
      },
      {
        name: 'allowAddRoot',
        setter: 'BoolSetter',
        defaultValue: true,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Allow add root',
            'zh-CN': '允许添加根节点',
          },
        },
      },
      {
        name: 'disabled',
        setter: 'BoolSetter',
        defaultValue: false,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Disabled',
            'zh-CN': '是否禁用',
          },
        },
      },
      {
        name: 'spacing',
        setter: 'NumberSetter',
        defaultValue: 8,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Spacing',
            'zh-CN': '间距',
          },
        },
      },
      {
        name: 'maxLevel',
        setter: 'NumberSetter',
        defaultValue: 3,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Max level',
            'zh-CN': '最大层级数',
          },
        },
      },
      {
        name: 'showBorder',
        setter: 'BoolSetter',
        defaultValue: true,
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Show border',
            'zh-CN': '显示边框',
          },
        },
      },
      {
        name: 'renderItem',
        title: { label: '自定义渲染', tip: '自定义渲染选项内容' },
        setter: [
          {
            componentName: 'SlotSetter',
            title: '渲染函数插槽',
            initialValue: {
              type: 'JSSlot',
              params: ['item'],
            },
          },
          {
            componentName: 'FunctionSetter',
            props: {
              template:
                'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
            },
          },
          'VariableSetter',
        ],
      },
      {
        name: 'leftContent',
        title: { label: '左侧自定义内容', tip: '左侧自定义内容' },
        setter: {
          componentName: 'SlotSetter',
          title: '左侧自定义内容',
          initialValue: {
            type: 'JSSlot',
          },
        },
      },
      {
        name: 'rightContent',
        title: { label: '右侧自定义内容', tip: '右侧自定义内容' },
        setter: {
          componentName: 'SlotSetter',
          title: '右侧自定义内容',
          initialValue: {
            type: 'JSSlot',
          },
        },
      },
    ],
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onChange',
          template: "onChange(item,${extParams}){\n// 节点变化回调\nconsole.log('onChange',item);}",
        },
        {
          name: 'onDelete',
          template: "onDelete(item,${extParams}){\n// 删除节点回调\nconsole.log('onDelete',item);}",
        },
        {
          name: 'onAdd',
          template: "onAdd(item,${extParams}){\n// 添加节点回调\nconsole.log('onAdd',item);}",
        },
        {
          name: 'onDragEnd',
          template: "onDragEnd(item,${extParams}){\n// 拖拽完成回调\nconsole.log('onDragEnd',item);}",
        },
        {
          name: 'onAddRoot',
          template: "onAddRoot(item,${extParams}){\n// 添加根节点回调\nconsole.log('onAddRoot',item);}",
        }
      ],
    },
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '拖拽排序',
    screenshot: '',
    schema: {
      title: "拖拽排序",
      componentName: 'PisellDropSort',
      props: {
        renderItem: {
          type: 'JSSlot',
          params: ['item'],
        },
        leftContent: {
          type: 'JSSlot',
        },
        value: [
          {
            id: '1',
            title: '节点1',
            children: [
              {
                id: '1-1',
                title: '节点1-1',
              },
            ],
          },
          {
            id: '2',
            title: '节点2',
          },
        ],
      },
    },
  },
];

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