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

const PisellScrollViewMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellScrollView',
  title: 'PisellScrollView',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellScrollView',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      /* ==================== 基础属性 ==================== */
      {
        name: 'children',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Children',
            'zh-CN': '子元素',
          },
        },
        setter: 'SlotSetter',
      },
      {
        name: 'className',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'ClassName',
            'zh-CN': '类名',
          },
        },
        setter: ['PisellI18nSetter', 'StringSetter'],
      },
      {
        name: 'style',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Style',
            'zh-CN': '样式',
          },
        },
        setter: 'StyleSetter',
      },

      /* ==================== 滚动方向控制 ==================== */
      {
        name: 'overflow',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Overflow',
            'zh-CN': '滚动方向',
          },
          tip: '控制滚动的方向',
        },
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              { title: '自动 (auto)', value: 'auto' },
              { title: '滚动 (scroll)', value: 'scroll' },
              { title: '隐藏 (hidden)', value: 'hidden' },
              { title: '水平 (x)', value: 'x' },
              { title: '垂直 (y)', value: 'y' },
              { title: '双向 (both)', value: 'both' },
            ],
          },
        },
        defaultValue: 'auto',
      },

      /* ==================== 滚动条样式 ==================== */
      {
        name: 'scrollbarStyle',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Scrollbar Style',
            'zh-CN': '滚动条样式',
          },
        },
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              { title: '默认', value: 'default' },
              { title: '细条', value: 'thin' },
              { title: '极简', value: 'minimal' },
              { title: '圆角', value: 'rounded' },
              { title: '悬浮', value: 'overlay' },
              { title: '自定义', value: 'custom' },
              { title: '无', value: 'none' },
            ],
          },
        },
        defaultValue: 'default',
      },
      {
        name: 'scrollbarClassName',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Scrollbar ClassName',
            'zh-CN': '自定义滚动条类名',
          },
          tip: '当 scrollbarStyle 为 custom 时使用',
        },
        setter: ['PisellI18nSetter', 'StringSetter'],
        condition: (target) => target.getProps().getPropValue('scrollbarStyle') === 'custom',
      },

      /* ==================== 滚动控制按钮 ==================== */
      {
        type: 'group',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Scroll Actions',
            'zh-CN': '滚动按钮',
          },
        },
        display: 'accordion',
        items: [
          {
            name: 'showScrollButtons',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Scroll Buttons',
                'zh-CN': '显示滚动按钮',
              },
            },
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'scrollActionsConfig.show',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Enable Actions',
                'zh-CN': '启用操作按钮',
              },
            },
            setter: 'BoolSetter',
            condition: (target) => target.getProps().getPropValue('showScrollButtons'),
          },
          {
            name: 'scrollActionsConfig.type',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Button Type',
                'zh-CN': '按钮类型',
              },
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '返回顶部', value: 'backTop' },
                  { title: '右箭头', value: 'rArrows' },
                  { title: '左右箭头', value: 'lrArrows' },
                  { title: '上下箭头', value: 'tbArrows' },
                  { title: '自定义', value: 'custom' },
                ],
              },
            },
            condition: (target) => target.getProps().getPropValue('showScrollButtons'),
          },
          {
            name: 'scrollActionsConfig.scrollDistance',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Scroll Distance',
                'zh-CN': '滚动距离',
              },
              tip: '每次点击按钮滚动的距离（像素）',
            },
            setter: 'NumberSetter',
            condition: (target) => target.getProps().getPropValue('showScrollButtons'),
          },
        ],
      },

      /* ==================== 滚动事件 ==================== */
      {
        type: 'group',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Scroll Events',
            'zh-CN': '滚动事件',
          },
        },
        display: 'accordion',
        items: [
          {
            name: 'onScroll',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Scroll',
                'zh-CN': '滚动时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'onScrollStart',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Scroll Start',
                'zh-CN': '开始滚动时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'onScrollEnd',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Scroll End',
                'zh-CN': '滚动结束时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'scrollEndDelay',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Scroll End Delay',
                'zh-CN': '滚动结束延迟',
              },
              tip: '滚动结束防抖延迟时间（ms），默认 150ms',
            },
            setter: 'NumberSetter',
            defaultValue: 150,
          },
          {
            name: 'onReachTop',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Reach Top',
                'zh-CN': '到达顶部时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'onReachBottom',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Reach Bottom',
                'zh-CN': '到达底部时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'onReachLeft',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Reach Left',
                'zh-CN': '到达左边时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'onReachRight',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Reach Right',
                'zh-CN': '到达右边时触发',
              },
            },
            setter: 'FunctionSetter',
          },
          {
            name: 'reachThreshold',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Reach Threshold',
                'zh-CN': '边界阈值',
              },
              tip: '到达边界的像素阈值',
            },
            setter: 'NumberSetter',
            defaultValue: 0,
          },
        ],
      },

      /* ==================== 视图监听 ==================== */
      {
        type: 'group',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Intersection Observer',
            'zh-CN': '视图监听',
          },
        },
        display: 'accordion',
        items: [
          {
            name: 'intersection.enabled',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Enable',
                'zh-CN': '启用视图监听',
              },
            },
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'intersection.threshold',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Threshold',
                'zh-CN': '交叉阈值',
              },
              tip: '取值范围 0-1，或者数组',
            },
            setter: ['NumberSetter', 'JsonSetter'],
            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
          },
          {
            name: 'intersection.rootMargin',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Root Margin',
                'zh-CN': '根边距',
              },
              tip: '例如："10px 20px 30px 40px"',
            },
            setter: ['PisellI18nSetter', 'StringSetter'],
            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
          },
          {
            name: 'intersection.targetSelector',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Target Selector',
                'zh-CN': '目标元素选择器',
              },
              tip: '需要监听的元素选择器',
            },
            setter: ['PisellI18nSetter', 'StringSetter'],
            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
          },
          {
            name: 'intersection.onEnterViewport',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Enter Viewport',
                'zh-CN': '进入视图回调',
              },
            },
            setter: 'FunctionSetter',
            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
          },
          {
            name: 'intersection.onLeaveViewport',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Leave Viewport',
                'zh-CN': '离开视图回调',
              },
            },
            setter: 'FunctionSetter',
            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
          },
          {
            name: 'intersection.onVisibilityChange',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Visibility Change',
                'zh-CN': '可见度变化回调',
              },
            },
            setter: 'FunctionSetter',
            condition: (target) => target.getProps().getPropValue('intersection.enabled'),
          },
        ],
      },

      /* ==================== 吸附滚动 ==================== */
      {
        type: 'group',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Snap Scroll',
            'zh-CN': '吸附滚动',
          },
        },
        display: 'accordion',
        items: [
          {
            name: 'snapScroll.enabled',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Enable',
                'zh-CN': '启用吸附滚动',
              },
            },
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'snapScroll.type',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Type',
                'zh-CN': '吸附类型',
              },
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '强制吸附', value: 'mandatory' },
                  { title: '就近吸附', value: 'proximity' },
                ],
              },
            },
            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
          },
          {
            name: 'snapScroll.align',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Align',
                'zh-CN': '吸附对齐方式',
              },
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '起始', value: 'start' },
                  { title: '居中', value: 'center' },
                  { title: '结束', value: 'end' },
                ],
              },
            },
            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
          },
          {
            name: 'snapScroll.onSnapStart',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Snap Start',
                'zh-CN': '吸附开始回调',
              },
            },
            setter: 'FunctionSetter',
            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
          },
          {
            name: 'snapScroll.onSnapEnd',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Snap End',
                'zh-CN': '吸附结束回调',
              },
            },
            setter: 'FunctionSetter',
            condition: (target) => target.getProps().getPropValue('snapScroll.enabled'),
          },
        ],
      },

      /* ==================== 尺寸 ==================== */
      {
        type: 'group',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Size',
            'zh-CN': '尺寸',
          },
        },
        display: 'accordion',
        items: [
          {
            name: 'width',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Width',
                'zh-CN': '宽度',
              },
            },
            setter: ['NumberSetter', 'StringSetter'],
          },
          {
            name: 'height',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Height',
                'zh-CN': '高度',
              },
            },
            setter: ['NumberSetter', 'StringSetter'],
          },
          {
            name: 'maxWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Max Width',
                'zh-CN': '最大宽度',
              },
            },
            setter: ['NumberSetter', 'StringSetter'],
          },
          {
            name: 'maxHeight',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Max Height',
                'zh-CN': '最大高度',
              },
            },
            setter: ['NumberSetter', 'StringSetter'],
          },
          {
            name: 'minWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Min Width',
                'zh-CN': '最小宽度',
              },
            },
            setter: ['NumberSetter', 'StringSetter'],
          },
          {
            name: 'minHeight',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Min Height',
                'zh-CN': '最小高度',
              },
            },
            setter: ['NumberSetter', 'StringSetter'],
          },
        ],
      },
    ],
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
      events: [
        'onScroll',
        'onScrollStart',
        'onScrollEnd',
        'onReachTop',
        'onReachBottom',
        'onReachLeft',
        'onReachRight',
      ],
    },
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '滚动容器',
    screenshot: '',
    schema: {
      componentName: 'PisellScrollView',
      props: {
        width: '100%',
        height: '300px',
        overflow: 'y',
        scrollbarStyle: 'thin',
      },
      children: [
        {
          componentName: 'Text',
          props: {
            children: '这是滚动内容',
          },
        },
      ],
    },
  },
  {
    title: '吸附滚动容器',
    screenshot: '',
    schema: {
      componentName: 'PisellScrollView',
      props: {
        width: '100%',
        height: '400px',
        overflow: 'y',
        scrollbarStyle: 'minimal',
        snapScroll: {
          enabled: true,
          type: 'mandatory',
          align: 'start',
        },
      },
    },
  },
];

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

