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

const DataVMarqueeMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataVMarquee',
  title: '跑马灯',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '云仓大屏',
  category: '轮播表',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.6',
    exportName: 'DataVMarquee',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'className',
            'zh-CN': '容器类',
          },
          tip: 'className | 容器类',
        },
        name: 'className',
        description: '@description 容器类',
        setter: {
          componentName: 'ClassNameSetter',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'autoFill',
            'zh-CN': '自动填充',
          },
          tip: 'autoFill | @description 是否要自动使用子级的副本填充跑马灯中的空白空间？',
        },
        name: 'autoFill',
        description: '@description 是否要自动使用子级的副本填充跑马灯中的空白空间？',
        defaultValue: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'play',
            'zh-CN': '播放或暂停',
          },
          tip: 'play | @description 播放或暂停',
        },
        name: 'play',
        description: '@description 播放或暂停',
        defaultValue: true,
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'pauseOnHover',
            'zh-CN': '鼠标移入暂停',
          },
          tip: 'pauseOnHover | 鼠标移入暂停',
        },
        name: 'pauseOnHover',
        description: '鼠标移入暂停',
        defaultValue: false,
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'pauseOnClick',
            'zh-CN': '鼠标点击暂停',
          },
          tip: 'pauseOnClick | 鼠标点击暂停',
        },
        name: 'pauseOnClick',
        description: '鼠标点击暂停',
        defaultValue: false,
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'direction',
            'zh-CN': '滚动方向',
          },
          tip: 'direction | 滚动方向',
        },
        name: 'direction',
        description: '滚动方向',
        defaultValue: 'left',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: 'left',
                value: 'left',
              },
              {
                label: 'right',
                value: 'right',
              },
              {
                label: 'up',
                value: 'up',
              },
              {
                label: 'down',
                value: 'down',
              },
            ],
          },
          initialValue: 'left',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'speed',
            'zh-CN': '滚动速度',
          },
          tip: 'speed | 滚动速度',
        },
        name: 'speed',
        description: '滚动速度',
        defaultValue: 50,
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 50,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'delay',
            'zh-CN': '动画时间（s）',
          },
          tip: 'delay | 动画渲染后延迟的持续时间，以秒为单位',
        },
        name: 'delay',
        description: '动画渲染后延迟的持续时间，以秒为单位',
        defaultValue: 0,
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 0,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'loop',
            'zh-CN': '循环次数',
          },
          tip: 'loop | 跑马灯应该循环的次数，0 等同于无限',
        },
        name: 'loop',
        description: '跑马灯应该循环的次数，0 等同于无限',
        defaultValue: 0,
        setter: {
          componentName: 'NumberSetter',
          initialValue: 0,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'gradient',
            'zh-CN': '渐变显示',
          },
          tip: 'gradient | 是否显示渐变或不显示',
        },
        name: 'gradient',
        description: '是否显示渐变或不显示',
        defaultValue: false,
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'gradientColor',
            'zh-CN': '渐变的颜色',
          },
          tip: 'gradientColor | 渐变的颜色',
        },
        name: 'gradientColor',
        description: '渐变的颜色',
        defaultValue: 'white',
        setter: {
          componentName: 'ColorSetter',
          isRequired: false,
          initialValue: 'white',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'gradientWidth',
            'zh-CN': '两侧渐变的宽度',
          },
          tip: 'gradientWidth | 两侧渐变的宽度',
        },
        name: 'gradientWidth',
        description: '两侧渐变的宽度',
        defaultValue: 200,
        setter: {
          componentName: 'NumberSetter',
          isRequired: false,
          initialValue: 200,
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'onFinish',
            'zh-CN': '结束回调',
          },
          tip: 'onFinish | 当跑马灯完成滚动并停止时的回调。仅在循环非零时调用。',
        },
        name: 'onFinish',
        description: '当跑马灯完成滚动并停止时的回调。仅在循环非零时调用。',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'onCycleComplete',
            'zh-CN': '单词循环回调',
          },
          tip:
            'onCycleComplete | 当走马灯完成一个循环时的回调。如果达到最大循环次数，将不会调用（请使用onFinish）。',
        },
        name: 'onCycleComplete',
        description:
          '当走马灯完成一个循环时的回调。如果达到最大循环次数，将不会调用（请使用onFinish）。',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'onMount',
            'zh-CN': '挂载后回调',
          },
          tip:
            'onMount | 一个回调函数，在走马灯完成挂载后被调用。如果需要的话，可以用来重新计算页面大小。',
        },
        name: 'onMount',
        description:
          '一个回调函数，在走马灯完成挂载后被调用。如果需要的话，可以用来重新计算页面大小。',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '跑马灯',
    screenshot: 'https://files.ztocwst.com/download/e808101c3bde47ba951be7501c038d61?isShow=true',
    schema: {
      componentName: 'DataVMarquee',
      props: {
        autoFill: false,
        play: true,
        pauseOnHover: false,
        pauseOnClick: false,
        direction: 'left',
        speed: 50,
        delay: 0,
        loop: 0,
        gradient: false,
        gradientColor: 'white',
        gradientWidth: 200,
      },
    },
  },
];

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