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

const PisellDraggableMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellDraggable',
  title: 'PisellDraggable',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellDraggable',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'items',
          'zh-CN': '拖拽项列表',
        },
      },
      name: 'items',
      description: '拖拽项数据列表',
      setter: 'JsonSetter',
      defaultValue: [],
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'direction',
          'zh-CN': '排列方向',
        },
      },
      name: 'direction',
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { label: '垂直', value: 'vertical' },
            { label: '水平', value: 'horizontal' },
            { label: '网格', value: 'grid' },
          ],
        },
      },
      defaultValue: 'vertical',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'columns',
          'zh-CN': '列数',
        },
      },
      name: 'columns',
      description: '网格布局时的列数',
      setter: 'NumberSetter',
      defaultValue: 3,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'allowCrossContainer',
          'zh-CN': '允许跨容器',
        },
      },
      name: 'allowCrossContainer',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'disabled',
          'zh-CN': '禁用',
        },
      },
      name: 'disabled',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'animationDuration',
          'zh-CN': '动画时长',
        },
      },
      name: 'animationDuration',
      description: '动画持续时间（毫秒）',
      setter: 'NumberSetter',
      defaultValue: 250,
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'className',
          'zh-CN': '类名',
        },
      },
      name: 'className',
      setter: 'StringSetter',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'style',
          'zh-CN': '样式',
        },
      },
      name: 'style',
      setter: 'StyleSetter',
    },
    {
      title: {
        label: {
          type: 'i18n',
          'en-US': 'dragMode',
          'zh-CN': '拖动方式',
        },
      },
      name: 'dragMode',
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { label: '手柄拖动', value: 'handle' },
            { label: '整体拖动', value: 'item' },
          ],
        },
      },
      defaultValue: 'handle',
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onDragStart',
          description: '拖拽开始时的回调',
        },
        {
          name: 'onDragEnd',
          description: '拖拽结束时的回调',
        },
        {
          name: 'onChange',
          description: '数据变化时的回调',
        },
      ],
    },
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: 'PisellDraggable',
    screenshot: '',
    schema: {
      componentName: 'PisellDraggable',
      props: {
        items: [
          { id: '1', content: '项目 1' },
          { id: '2', content: '项目 2' },
          { id: '3', content: '项目 3' },
        ],
      },
    },
  },
];

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