import snippets from './snippets';

const PisellStepsMeta = {
  componentName: 'PisellSteps',
  title: '步骤条',
  category: '导航',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellSteps',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic',
            'zh-CN': '基础配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'type',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Type',
                'zh-CN': '步骤条类型',
              },
              tip: 'type | 步骤条类型，可选 default、navigation。点状模式通过 progressDot 属性控制',
            },
            propType: {
              type: 'oneOf',
              value: ['default', 'navigation'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '默认',
                      value: 'default',
                    },
                    {
                      title: '导航',
                      value: 'navigation',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'default',
          },
          {
            name: 'progressDot',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Progress Dot',
                'zh-CN': '点状步骤条',
              },
              tip: 'progressDot | 点状步骤条，设置为 true 启用点状模式',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'current',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Current',
                'zh-CN': '当前步骤',
              },
              tip: 'current | 当前步骤索引（受控模式）',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'defaultCurrent',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Default Current',
                'zh-CN': '默认当前步骤',
              },
              tip: 'defaultCurrent | 默认当前步骤索引（非受控模式）',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 0,
          },
          {
            name: 'direction',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Direction',
                'zh-CN': '方向',
              },
              tip: 'direction | 步骤条方向',
            },
            propType: {
              type: 'oneOf',
              value: ['horizontal', 'vertical'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '横向',
                      value: 'horizontal',
                    },
                    {
                      title: '竖向',
                      value: 'vertical',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'horizontal',
          },
          {
            name: 'size',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Size',
                'zh-CN': '尺寸',
              },
              tip: 'size | 步骤条尺寸',
            },
            propType: {
              type: 'oneOf',
              value: ['small', 'default', 'large'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '小',
                      value: 'small',
                    },
                    {
                      title: '中',
                      value: 'default',
                    },
                    {
                      title: '大',
                      value: 'large',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'default',
          },
          {
            name: 'status',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Status',
                'zh-CN': '当前步骤状态',
              },
              tip: 'status | 当前步骤的状态',
            },
            propType: {
              type: 'oneOf',
              value: ['wait', 'process', 'finish', 'error'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: '等待',
                      value: 'wait',
                    },
                    {
                      title: '进行中',
                      value: 'process',
                    },
                    {
                      title: '完成',
                      value: 'finish',
                    },
                    {
                      title: '错误',
                      value: 'error',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'process',
          },
          {
            name: 'items',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Items',
                'zh-CN': '步骤数据',
              },
              tip: 'items | 步骤数据配置数组',
            },
            propType: 'object',
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          name: 'title',
                          title: {
                            label: '标题',
                            tip: '步骤标题',
                          },
                          propType: { type: 'oneOfType', value: ['string', 'node'] },
                          setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
                          isRequired: true,
                        },
                        {
                          name: 'subTitle',
                          title: {
                            label: '副标题',
                            tip: '步骤副标题',
                          },
                          propType: { type: 'oneOfType', value: ['string', 'node'] },
                          setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
                        },
                        {
                          name: 'description',
                          title: {
                            label: '描述',
                            tip: '步骤描述',
                          },
                          propType: { type: 'oneOfType', value: ['string', 'node'] },
                          setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
                        },
                        {
                          name: 'icon',
                          title: {
                            label: '图标',
                            tip: '自定义步骤图标',
                          },
                          propType: { type: 'oneOfType', value: ['node'] },
                          setter: [
                            {
                              componentName: 'SlotSetter',
                              initialValue: {
                                type: 'JSSlot',
                                value: [
                                  {
                                    componentName: 'Icon',
                                    props: {
                                      type: 'CheckOutlined',
                                      size: 16,
                                    },
                                  },
                                ],
                              },
                            },
                          ],
                        },
                        {
                          name: 'status',
                          title: {
                            label: '状态',
                            tip: '步骤状态',
                          },
                          propType: {
                            type: 'oneOf',
                            value: ['wait', 'process', 'finish', 'error'],
                          },
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                { title: '等待', value: 'wait' },
                                { title: '进行中', value: 'process' },
                                { title: '完成', value: 'finish' },
                                { title: '错误', value: 'error' },
                              ],
                            },
                          },
                        },
                        {
                          name: 'disabled',
                          title: {
                            label: '禁用',
                            tip: '是否禁用点击',
                          },
                          propType: 'bool',
                          setter: 'BoolSetter',
                          defaultValue: false,
                        },
                        {
                          name: 'hidden',
                          title: {
                            label: '隐藏',
                            tip: '是否隐藏该步骤',
                          },
                          propType: 'bool',
                          setter: 'BoolSetter',
                          defaultValue: false,
                        },
                      ],
                    },
                  },
                },
              },
            },
          },
          {
            name: 'className',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'ClassName',
                'zh-CN': '类名',
              },
              tip: 'className | 自定义类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Advanced',
            'zh-CN': '高级配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'clickable',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Clickable',
                'zh-CN': '可点击',
              },
              tip: 'clickable | 是否允许点击步骤切换',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'allowClickFinished',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Allow Click Finished',
                'zh-CN': '允许点击已完成',
              },
              tip: 'allowClickFinished | 是否允许点击已完成的步骤',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'percent',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Percent',
                'zh-CN': '进度百分比',
              },
              tip: 'percent | 当前步骤的进度百分比（0-100），直接使用 antd Steps 的 percent 属性',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'responsive',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Responsive',
                'zh-CN': '响应式',
              },
              tip: 'responsive | 是否开启响应式',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Scroll Mode',
            'zh-CN': '滚动模式',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'enableScrollMode',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Enable Scroll Mode',
                'zh-CN': '启用滚动模式',
              },
              tip: 'enableScrollMode | 当步骤条宽度不足时，启用横向滚动并显示左右箭头按钮',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'scrollActionsConfig',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Scroll Actions Config',
                'zh-CN': '滚动箭头配置',
              },
              tip: 'scrollActionsConfig | 配置滚动箭头的显示类型和滚动距离',
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'show',
                      title: {
                        label: '显示箭头',
                        tip: '是否显示滚动箭头',
                      },
                      propType: 'bool',
                      setter: 'BoolSetter',
                      defaultValue: true,
                    },
                    {
                      name: 'type',
                      title: {
                        label: '箭头类型',
                        tip: '滚动箭头的显示类型',
                      },
                      propType: {
                        type: 'oneOf',
                        value: ['lrArrows', 'rArrows'],
                      },
                      setter: {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            { title: '左右箭头', value: 'lrArrows' },
                            { title: '仅右箭头', value: 'rArrows' },
                          ],
                        },
                      },
                      defaultValue: 'lrArrows',
                    },
                    {
                      name: 'scrollDistance',
                      title: {
                        label: '滚动距离',
                        tip: '每次点击箭头滚动的距离（单位：px）',
                      },
                      propType: 'number',
                      setter: 'NumberSetter',
                      defaultValue: 200,
                    },
                  ],
                },
              },
            },
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("enableScrollMode")',
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Layout',
            'zh-CN': '布局配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'labelPlacement',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Label Placement',
                'zh-CN': '标签位置',
              },
              tip: 'labelPlacement | 标识区和文本区的布局方式：horizontal-文本在图标右侧，vertical-文本在图标下方（仅在水平步骤条时生效）',
            },
            propType: {
              type: 'oneOf',
              value: ['horizontal', 'vertical'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '水平',
                      value: 'horizontal',
                    },
                    {
                      title: '垂直',
                      value: 'vertical',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'horizontal',
          },
          {
            name: 'itemGap',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Item Gap',
                'zh-CN': '标识区和文本区间距',
              },
              tip: 'itemGap | 标识区和文本区的间距（单位：px），横向时控制图标右侧间距，纵向时控制图标下方间距',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'gridLayout',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Grid Layout',
                'zh-CN': '栅格布局',
              },
              tip: 'gridLayout | 是否开启栅格布局',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'gridColumns',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Grid Columns',
                'zh-CN': '栅格列数',
              },
              tip: 'gridColumns | 栅格列数（仅在 gridLayout=true 时有效）',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            condition: {
              type: 'JSFunction',
              value: 'target => !!target.getProps().getPropValue("gridLayout")',
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onChange',
          template:
            'onChange(current,${extParams}){\n// 步骤变更时的回调\nconsole.log(\'onChange\', current);}',
        },
      ],
    },
    component: {
      isContainer: false,
    },
  },
};

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