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

/**
 * PisellSuperTabs 组件元数据
 * @description 通用导航框架封装的全能型 Tab 组件
 */
const PisellSuperTabsMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellSuperTabs',
  title: 'Super Tabs',
  category: '导航',
  group: 'Pro 组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellSuperTabs',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    component: {
      isContainer: false,
    },
    props: [
      /* ==================== 基础属性 ==================== */
      {
        name: 'className',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Class Name',
            'zh-CN': '类名',
          },
          tip: 'className | 添加到最外层容器的类名',
        },
        propType: 'string',
        setter: ['StringSetter', 'VariableSetter'],
      },
      {
        name: 'style',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Style',
            'zh-CN': '样式',
          },
          tip: 'style | 添加到最外层容器的样式',
        },
        propType: 'object',
        setter: 'StyleSetter',
      },

      /* ==================== 数据源 ==================== */
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Data Source',
            'zh-CN': '数据源',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'dataSource',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Data Source',
                'zh-CN': '数据源',
              },
              tip: 'dataSource | Tab 数据源数组，支持多级嵌套（children 字段）',
            },
            propType: {
              type: 'arrayOf',
              value: 'object',
            },
            setter: ['JsonSetter', 'VariableSetter'],
          },
          {
            name: 'rowKey',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Row Key',
                'zh-CN': '唯一标识字段',
              },
              tip: 'rowKey | 数据项的唯一标识字段名或函数',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'func'],
            },
            setter: ['StringSetter', 'FunctionSetter', 'VariableSetter'],
            defaultValue: 'key',
          },
        ],
      },

      /* ==================== 受控模式 ==================== */
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Control Mode',
            'zh-CN': '受控模式',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'value',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Current Key',
                'zh-CN': '当前激活的 Tab Key',
              },
              tip: 'value | 受控模式，需配合 onChange 使用',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'defaultValue',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Default Key',
                'zh-CN': '默认激活的 Tab Key',
              },
              tip: 'defaultValue | 非受控模式，仅初始化时生效',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'onChange',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'On Change',
                'zh-CN': 'Tab 切换回调',
              },
              tip: 'onChange | Tab 切换时的回调函数 (key, item) => void',
            },
            propType: 'func',
            setter: ['FunctionSetter', 'VariableSetter'],
          },
        ],
      },

      /* ==================== 自定义渲染 ==================== */
      {
        name: "renderItem",
        title: {
          label: "渲染函数",
          tip: "renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项",
        },
        propType: "func",
        setter: [
          {
            componentName: "SlotSetter",
            title: "渲染函数插槽",
            initialValue: {
              type: "JSSlot",
              params: ["props"],
              value: [
                {
                  componentName: "PisellCards.TextCard",
                  props: {
                    props: {
                      type: "JSExpression",
                      value: "this.props",
                    }
                  },
                },
              ],
            },
            defaultValue: {
              type: "JSSlot",
              params: ["props"],
              value: [
                {
                  componentName: "PisellCards.TextCard",
                  props: {
                    props: {
                      type: "JSExpression",
                      value: "this.props",
                    }
                  },
                },
              ],
            },
          },
          {
            componentName: "FunctionSetter",
            props: {
              template:
                "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
            },
          },
          "VariableSetter",
        ],
      },

      {
        name: "slotLeft",
        title: {
          label: "左侧插槽",
          tip: "slotLeft | 左侧插槽",
        },
        propType: "func",
        setter: [
          {
            componentName: "SlotSetter",
            title: "左侧插槽",
          },
          {
            componentName: "FunctionSetter",
            props: {
              template:
                "slotLeft(props){\n// 自定义渲染左侧插槽\nreturn `props`;\n}",
            },
          },
          "VariableSetter",
        ],
      },

      {
        name: "slotRight",
        title: {
          label: "右侧插槽",
          tip: "slotRight | 右侧插槽",
        },
        propType: "func",
        setter: [
          {
            componentName: "SlotSetter",
            title: "右侧插槽",
          },
          {
            componentName: "FunctionSetter",
            props: {
              template:
                "slotRight(props){\n// 自定义渲染右侧插槽\nreturn `props`;\n}",
            },
          },
          "VariableSetter",
        ],
      },

      {
        name: "slotTop",
        title: {
          label: "顶部插槽",
          tip: "slotTop | 顶部插槽",
        },
        propType: "func",
        setter: [
          {
            componentName: "SlotSetter",
            title: "顶部插槽",
          },
          {
            componentName: "FunctionSetter",
            props: {
              template:
                "slotTop(props){\n// 自定义渲染顶部插槽\nreturn `props`;\n}",
            },
          },
          "VariableSetter",
        ],
      },

      {
        name: "slotBottom",
        title: {
          label: "底部插槽",
          tip: "slotBottom | 底部插槽",
        },
        propType: "func",
        setter: [
          {
            componentName: "SlotSetter",
            title: "底部插槽",
          },
          {
            componentName: "FunctionSetter",
            props: {
              template:
                "slotBottom(props){\n// 自定义渲染底部插槽\nreturn `props`;\n}",
            },
          },
          "VariableSetter",
        ],
      },

      /* ==================== PisellBasicGrid Props ==================== */
      {
        name: 'gridProps',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Grid Props',
            'zh-CN': '布局配置',
          },
          tip: 'gridProps | PisellBasicGrid 组件的配置',
        },
        propType: 'object',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'direction',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Direction',
                      'zh-CN': '排列方向',
                    },
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['horizontal', 'horizontal-reverse', 'vertical', 'vertical-reverse'],
                  },
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        { title: '横向排列', value: 'horizontal' },
                        { title: '横向反向', value: 'horizontal-reverse' },
                        { title: '竖向排列', value: 'vertical' },
                        { title: '竖向反向', value: 'vertical-reverse' },
                      ],
                    },
                  },
                  defaultValue: 'horizontal',
                },
                {
                  name: 'wrap',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Wrap',
                      'zh-CN': '换行控制',
                    },
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['nowrap', 'wrap', 'wrap-reverse'],
                  },
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        { title: '不换行', value: 'nowrap' },
                        { title: '换行', value: 'wrap' },
                        { title: '反向换行', value: 'wrap-reverse' },
                      ],
                    },
                  },
                  defaultValue: 'nowrap',
                },
                {
                  name: 'columns',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Columns',
                      'zh-CN': '一行显示个数',
                    },
                  },
                  propType: 'number',
                  setter: 'NumberSetter',
                },
                {
                  name: 'equalWidth',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Equal Width',
                      'zh-CN': '等分容器宽度',
                    },
                  },
                  propType: 'bool',
                  setter: 'BoolSetter',
                  defaultValue: false,
                },
                {
                  name: 'gap',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Gap',
                      'zh-CN': '间距',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'rowGap',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Row Gap',
                      'zh-CN': '行间距',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'columnGap',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Column Gap',
                      'zh-CN': '列间距',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'justify',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Justify',
                      'zh-CN': '主轴对齐',
                    },
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['start', 'end', 'center', 'between', 'around', 'evenly'],
                  },
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        { title: '起始对齐', value: 'start' },
                        { title: '末尾对齐', value: 'end' },
                        { title: '居中对齐', value: 'center' },
                        { title: '两端对齐', value: 'between' },
                        { title: '环绕对齐', value: 'around' },
                        { title: '均匀分布', value: 'evenly' },
                      ],
                    },
                  },
                  defaultValue: 'start',
                },
                {
                  name: 'align',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Align',
                      'zh-CN': '交叉轴对齐',
                    },
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['start', 'end', 'center', 'stretch', 'baseline'],
                  },
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        { title: '起始对齐', value: 'start' },
                        { title: '末尾对齐', value: 'end' },
                        { title: '居中对齐', value: 'center' },
                        { title: '拉伸对齐', value: 'stretch' },
                        { title: '基线对齐', value: 'baseline' },
                      ],
                    },
                  },
                  defaultValue: 'stretch',
                },
                {
                  name: 'className',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Class Name',
                      'zh-CN': 'Grid 类名',
                    },
                  },
                  propType: 'string',
                  setter: 'StringSetter',
                },
              ],
            },
          },
        },
      },

      /* ==================== PisellScrollView Props ==================== */
      {
        name: 'scrollViewProps',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Scroll View Props',
            'zh-CN': '滚动配置',
          },
          tip: 'scrollViewProps | PisellScrollView 组件的配置',
        },
        propType: 'object',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'overflow',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Overflow',
                      'zh-CN': '滚动方向',
                    },
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['auto', 'scroll', 'hidden', 'x', 'y', 'both'],
                  },
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        { title: '自动', value: 'auto' },
                        { title: '强制滚动', value: 'scroll' },
                        { title: '隐藏', value: 'hidden' },
                        { title: '横向', value: 'x' },
                        { title: '竖向', value: 'y' },
                        { title: '双向', value: 'both' },
                      ],
                    },
                  },
                  defaultValue: 'auto',
                },
                {
                  name: 'scrollbarStyle',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Scrollbar Style',
                      'zh-CN': '滚动条样式',
                    },
                  },
                  propType: {
                    type: 'oneOf',
                    value: ['default', 'thin', 'minimal', 'rounded', 'overlay', 'custom', 'none'],
                  },
                  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: 'scrollActionsConfig',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Scroll Actions',
                      'zh-CN': '滚动按钮',
                    },
                  },
                  propType: 'object',
                  setter: 'JsonSetter',
                },
                {
                  name: 'snapScroll',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Snap Scroll',
                      'zh-CN': '吸附滚动',
                    },
                  },
                  propType: 'object',
                  setter: 'JsonSetter',
                },
                {
                  name: 'width',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Width',
                      'zh-CN': '宽度',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'height',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Height',
                      'zh-CN': '高度',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'maxWidth',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Max Width',
                      'zh-CN': '最大宽度',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'maxHeight',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Max Height',
                      'zh-CN': '最大高度',
                    },
                  },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: ['NumberSetter', 'StringSetter'],
                },
                {
                  name: 'className',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'Class Name',
                      'zh-CN': 'ScrollView 类名',
                    },
                  },
                  propType: 'string',
                  setter: 'StringSetter',
                },

              ],
            },
          },
        },
      },
    ],
    supports: {
      className: true,
      style: true,
    },
  },
};

/**
 * Snippets
 */
const snippets: IPublicTypeSnippet[] = [
  {
    title: 'Super Tabs',
    screenshot: '',
    schema: {
      componentName: 'PisellSuperTabs',
      props: {
        dataSource: [
          { key: 'tab1', label: 'Tab 1' },
          { key: 'tab2', label: 'Tab 2' },
          { key: 'tab3', label: 'Tab 3' },
        ],
        gridProps: {
          direction: 'horizontal',
          gap: 16,
        },
        scrollViewProps: {
          overflow: 'auto',
        },
      },
    },
  },
  {
    title: 'Super Tabs (横向)',
    screenshot: '',
    schema: {
      componentName: 'PisellSuperTabs',
      props: {
        dataSource: [
          { key: 'home', label: '首页' },
          { key: 'products', label: '产品' },
          { key: 'about', label: '关于' },
          { key: 'contact', label: '联系' },
        ],
        gridProps: {
          direction: 'horizontal',
          gap: 16,
        },
        scrollViewProps: {
          overflow: 'x',
          scrollbarStyle: 'thin',
        },
      },
    },
  },
  {
    title: 'Super Tabs (竖向)',
    screenshot: '',
    schema: {
      componentName: 'PisellSuperTabs',
      props: {
        dataSource: [
          { key: 'menu1', label: '菜单 1' },
          { key: 'menu2', label: '菜单 2' },
          { key: 'menu3', label: '菜单 3' },
          { key: 'menu4', label: '菜单 4' },
        ],
        gridProps: {
          direction: 'vertical',
          gap: 8,
        },
        scrollViewProps: {
          overflow: 'y',
          height: '100vh',
        },
      },
    },
  },
];

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