import snippets from './snippets';

const PisellProcedureMeta = {
  componentName: 'PisellProcedure',
  title: '流程容器',
  category: '容器',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellProcedure',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // ========== 通用配置 ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'General',
            'zh-CN': '通用配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'mode',
            title: {
              label: '使用模式',
              tip: 'mode | 组件使用模式：page（页面模式）或 modal（弹窗模式）。弹窗模式下不应用移动端模式、不隐藏信息区、不强制底部悬浮、不显示移动端总结按钮',
            },
            propType: {
              type: 'oneOf',
              value: ['page', 'modal'],
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { title: '页面模式', value: 'page' },
                  { title: '弹窗模式', value: 'modal' },
                ],
              },
            },
            defaultValue: 'page',
          },
          {
            name: 'showHeader',
            title: {
              label: '显示头部',
              tip: 'showHeader | 是否显示头部区域',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'showSidebar',
            title: {
              label: '显示信息区',
              tip: 'showSidebar | 是否显示信息区（侧边栏）',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'showFooter',
            title: {
              label: '显示底部',
              tip: 'showFooter | 是否显示底部区域',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
        ],
      },
      // ========== 步骤控制配置 ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Step Control',
            'zh-CN': '步骤控制',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'defaultCurrent',
            title: {
              label: '初始步骤',
              tip: 'defaultCurrent | 初始步骤索引，从 0 开始',
            },
            propType: 'number',
            setter: 'NumberSetter',
            defaultValue: 0,
          },
        ],
      },
      // ========== 头部区域配置 (8.2) ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Header Config',
            'zh-CN': '头部区域配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'headerProps.className',
            title: {
              label: '头部类名',
              tip: '自定义头部区域类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'headerProps.left',
            title: {
              label: '左侧插槽',
              tip: '头部左侧区域，可放置返回按钮等',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
          {
            name: 'headerProps.right',
            title: {
              label: '右侧插槽',
              tip: '头部右侧区域，可放置关闭按钮等',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
          {
            name: 'headerProps.slotOrder',
            title: {
              label: '插槽顺序',
              tip: 'default: 默认顺序（left 在左，right 在右）；reverse: 反转顺序（left 在右，right 在左，关闭按钮可在左侧）',
            },
            propType: {
              type: 'oneOf',
              value: ['default', 'reverse'],
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '默认顺序', value: 'default' },
                  { title: '反转顺序', value: 'reverse' },
                ],
              },
            },
            defaultValue: 'default',
          },
          {
            name: 'headerProps.showSteps',
            title: {
              label: '显示步骤条',
              tip: '是否显示步骤条，设置为 false 可隐藏步骤条',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'headerProps.showBackOnFirstStep',
            title: {
              label: '首步显示返回',
              tip: '第一步时是否显示返回按钮，默认不显示',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'headerProps.backConfirmModal.enabled',
            title: {
              label: '启用返回确认',
              tip: '返回上一步时是否需要弹窗确认',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'headerProps.backConfirmModal.title',
            title: {
              label: '确认弹窗标题',
              tip: '返回确认弹窗的标题',
            },
            setter: 'StringSetter',
          },
          {
            name: 'headerProps.backConfirmModal.describe',
            title: {
              label: '确认弹窗内容',
              tip: '返回确认弹窗的内容',
            },
            setter: 'StringSetter',
          },
          {
            name: 'headerProps.backConfirmModal.footer',
            title: {
              label: '返回弹窗按钮组',
              tip: '弹窗底部按钮配置数组',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
          {
            name: 'headerProps.closeConfirmModal.enabled',
            title: {
              label: '启用关闭确认',
              tip: '点击右侧关闭按钮时是否需要弹窗确认',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'headerProps.closeConfirmModal.title',
            title: {
              label: '关闭弹窗标题',
              tip: '关闭确认弹窗的标题',
            },
            setter: 'StringSetter',
          },
          {
            name: 'headerProps.closeConfirmModal.describe',
            title: {
              label: '关闭弹窗内容',
              tip: '关闭确认弹窗的内容',
            },
            setter: 'StringSetter',
          },
          {
            name: 'headerProps.closeConfirmModal.footer',
            title: {
              label: '关闭弹窗按钮组',
              tip: '弹窗底部按钮配置数组',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
        ],
      },
      // ========== 步骤条配置 (8.5) ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Steps Config',
            'zh-CN': '步骤条配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'headerProps.stepsProps.current',
            title: {
              label: '当前步骤',
              tip: '当前激活的步骤索引',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 0,
          },
          {
            name: 'headerProps.stepsProps.items',
            title: {
              label: '步骤数据',
              tip: '步骤条的数据配置',
            },
            propType: 'array',
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    items: [
                      {
                        name: 'title',
                        title: '标题',
                        propType: 'string',
                        setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
                      },
                      {
                        name: 'description',
                        title: '描述',
                        propType: 'string',
                        setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
                      },
                    ],
                  },
                },
              },
            },
          },
        ],
      },
      // ========== 主体区域配置 (8.3) ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Body Config',
            'zh-CN': '主体区域配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'bodyProps.direction',
            title: {
              label: '排列方向',
              tip: '内容区和信息区的排列方向。horizontal: 横向排列（左右布局），vertical: 纵向排列（上下布局）',
            },
            propType: {
              type: 'oneOf',
              value: ['horizontal', 'vertical'],
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '横向排列', value: 'horizontal' },
                  { title: '纵向排列', value: 'vertical' },
                ],
              },
            },
            defaultValue: 'horizontal',
          },
          {
            name: 'bodyProps.contentOrder',
            title: {
              label: '内容顺序',
              tip: 'content-first: 内容区在前（默认：横向时内容区在左，纵向时内容区在上）；sidebar-first: 信息区在前（横向时信息区在左，纵向时信息区在上）',
            },
            propType: {
              type: 'oneOf',
              value: ['content-first', 'sidebar-first'],
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '内容区在前', value: 'content-first' },
                  { title: '信息区在前', value: 'sidebar-first' },
                ],
              },
            },
            defaultValue: 'content-first',
          },
          {
            name: 'bodyProps.layoutMode',
            title: {
              label: '布局模式',
              tip: 'fixed: 固定宽度（信息区宽度随屏幕断点变化）；ratio: 比例布局（按设定比例分配宽度）',
            },
            propType: 'string',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { title: '固定宽度', value: 'fixed' },
                  { title: '比例布局', value: 'ratio' },
                ],
              },
            },
            defaultValue: 'fixed',
          },
          {
            name: 'bodyProps.layoutRatio',
            title: {
              label: '布局比例',
              tip: '内容区与信息区的宽度比例，仅在比例布局模式下生效',
            },
            propType: 'string',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '7:3', value: '7:3' },
                  { title: '6:4', value: '6:4' },
                ],
              },
            },
            defaultValue: '7:3',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("bodyProps.layoutMode") === "ratio"',
            },
          },
          {
            name: 'bodyProps.className',
            title: {
              label: '主体类名',
              tip: '自定义主体区域类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
      // ========== 内容区配置 (8.3.1) ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Content Config',
            'zh-CN': '内容区配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'bodyProps.contentClassName',
            title: {
              label: '内容区类名',
              tip: '自定义内容区类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'bodyProps.contentSlot',
            title: {
              label: '内容区插槽',
              tip: '主体内容区域',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
        ],
      },
      // ========== 信息区配置 (8.3.2) ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Sidebar Config',
            'zh-CN': '信息区配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'bodyProps.sidebarClassName',
            title: {
              label: '信息区类名',
              tip: '自定义信息区类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'bodyProps.sidebarSlot',
            title: {
              label: '信息区插槽',
              tip: '右侧信息区域',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
          {
            name: 'bodyProps.sidebarContainerSelector',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Sidebar Container Selector',
                'zh-CN': '信息区容器选择器',
              },
              tip: '用于计算信息区高度的容器元素选择器（类名或 ID），如 ".modal-content" 或 "#dialog-container"。如果不提供，则使用 window.innerHeight 作为基准。',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
        ],
      },
      // ========== 底部操作区配置 (8.4) ==========
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Footer Config',
            'zh-CN': '底部操作区配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'footerProps.position',
            title: {
              label: '位置模式',
              tip: '底部操作区的展示位置',
            },
            propType: 'string',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { title: '固定在底部', value: 'fixed-bottom' },
                  { title: '内嵌在内容区底部', value: 'fixed-content-bottom' },
                  { title: '内嵌在信息区底部', value: 'fixed-sidebar-bottom' },
                  { title: '悬浮在整体区域', value: 'float-all' },
                  { title: '悬浮在内容区', value: 'float-content' },
                  { title: '悬浮在信息区', value: 'float-sidebar' },
                ],
              },
            },
            defaultValue: 'float-sidebar',
          },
          {
            name: 'footerProps.className',
            title: {
              label: '底部类名',
              tip: '自定义底部区域类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'footerProps.enableOverflow',
            title: {
              label: '启用溢出收纳',
              tip: '当宽度不足时，将次序列的按钮收纳到 More 菜单中',
            },
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'footerProps.moreText',
            title: {
              label: 'More按钮文案',
              tip: '溢出收纳时 More 按钮的文案',
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter'],
            defaultValue: 'More',
          },
          {
            name: 'footerProps.summaryButton',
            title: {
              label: '移动端总结按钮',
              tip: '移动端显示的总结按钮插槽',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
          {
            name: 'footerProps.leftSlot',
            title: {
              label: '左侧插槽',
              tip: '底部左侧区域，可放置自定义内容（如总价信息、提示文案等）',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
          {
            name: 'footerProps.actions',
            title: {
              label: '操作按钮组',
              tip: '底部右侧操作按钮区域（如上一步、下一步、提交等）。最后一个按钮默认触发下一步。可通过 data-action 属性自定义：data-action="prev"(上一步)、data-action="next"(下一步)',
            },
            propType: 'node',
            setter: {
              componentName: 'SlotSetter',
              initialValue: {
                type: 'JSSlot',
                value: [],
              },
            },
          },
        ],
      },
    ],
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onStepsChange',
          description: '步骤变化回调，返回步骤变化结果（包含 success、currentStep、currentItem）',
        },
        {
          name: 'onPrev',
          description: '上一步事件回调，在步骤更新之前触发，返回 false 可阻止步骤更新',
        },
        {
          name: 'onNext',
          description: '下一步事件回调，在步骤更新之前触发，返回 false 可阻止步骤更新',
        },
        {
          name: 'onClose',
          description: '关闭按钮点击回调',
        },
        {
          name: 'onFirstStepBack',
          description: '首步返回按钮点击回调，当在第一步且显示返回按钮时触发，如果不传递默认跳转到首页（/）',
        },
        {
          name: 'onBackConfirm',
          description: '返回确认弹窗按钮回调，当点击返回确认弹窗的按钮时触发',
        },
        {
          name: 'onCloseConfirm',
          description: '关闭确认弹窗按钮回调，当点击关闭确认弹窗的按钮时触发',
        },
      ],
    },
  },
  snippets,
};

export default PisellProcedureMeta;