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

/**
 * PisellBasicGrid 组件元数据
 * @description 基于 Flexbox 的基础布局组件，用于控制循环型数据组件的排列方式
 */
const PisellBasicGridMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellBasicGrid',
  title: '基础布局',
  category: '布局',
  group: '原子组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellBasicGrid',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Layout',
            'zh-CN': '布局',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'direction',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Direction',
                'zh-CN': '排列方向',
              },
              tip: 'direction | 控制子元素的排列方向',
            },
            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' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'horizontal',
          },
          {
            name: 'wrap',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Wrap',
                'zh-CN': '换行控制',
              },
              tip: 'wrap | 控制子元素是否换行',
            },
            propType: {
              type: 'oneOf',
              value: ['nowrap', 'wrap', 'wrap-reverse'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '不换行', value: 'nowrap' },
                    { title: '换行', value: 'wrap' },
                    { title: '反向换行', value: 'wrap-reverse' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'nowrap',
          },
          {
            name: 'columns',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Columns',
                'zh-CN': '一行几个',
              },
              tip: 'columns | 一行显示的元素个数，会自动计算宽度',
            },
            propType: 'number',
            setter: [
              {
                componentName: 'NumberSetter',
                props: {
                  min: 1,
                  max: 24,
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'equalWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Equal Width',
                'zh-CN': '等分宽度',
              },
              tip: 'equalWidth | 子元素是否等分容器宽度',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Spacing',
            'zh-CN': '间距',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'gap',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Gap',
                'zh-CN': '统一间距',
              },
              tip: 'gap | 统一设置行列间距',
            },
            propType: {
              type: 'oneOfType',
              value: ['number', 'string'],
            },
            setter: [
              {
                componentName: 'NumberSetter',
                props: {
                  min: 0,
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
          },
          {
            name: 'rowGap',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Row Gap',
                'zh-CN': '行间距',
              },
              tip: 'rowGap | 行间距，优先级高于 gap',
            },
            propType: {
              type: 'oneOfType',
              value: ['number', 'string'],
            },
            setter: [
              {
                componentName: 'NumberSetter',
                props: {
                  min: 0,
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
          },
          {
            name: 'columnGap',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Column Gap',
                'zh-CN': '列间距',
              },
              tip: 'columnGap | 列间距，优先级高于 gap',
            },
            propType: {
              type: 'oneOfType',
              value: ['number', 'string'],
            },
            setter: [
              {
                componentName: 'NumberSetter',
                props: {
                  min: 0,
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Alignment',
            'zh-CN': '对齐',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'justify',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Justify',
                'zh-CN': '主轴对齐',
              },
              tip: 'justify | 控制子元素在主轴上的对齐方式',
            },
            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' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'start',
          },
          {
            name: 'align',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Align',
                'zh-CN': '交叉轴对齐',
              },
              tip: 'align | 控制子元素在交叉轴上的对齐方式',
            },
            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' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'stretch',
          },
          {
            name: 'alignContent',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Align Content',
                'zh-CN': '多行对齐',
              },
              tip: 'alignContent | 当存在多行时，控制行与行之间的对齐方式',
            },
            propType: {
              type: 'oneOf',
              value: ['start', 'end', 'center', 'between', 'around', 'stretch'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    { title: '顶部对齐', value: 'start' },
                    { title: '底部对齐', value: 'end' },
                    { title: '居中对齐', value: 'center' },
                    { title: '两端对齐', value: 'between' },
                    { title: '等间距', value: 'around' },
                    { title: '拉伸填充', value: 'stretch' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'stretch',
          },
        ],
      },
      {
        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 | 数据源数组，传入后组件内部自动循环渲染',
            },
            propType: 'array',
            setter: ['JsonSetter', 'VariableSetter'],
          },
          {
            name: 'renderItem',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Render Item',
                'zh-CN': '渲染函数',
              },
              tip: 'renderItem | 自定义每个数据项的渲染内容',
            },
            propType: 'func',
            setter: [
              {
                componentName: 'SlotSetter',
                title: '渲染插槽',
                initialValue: {
                  type: 'JSSlot',
                  params: ['item', 'index'],
                  value: [],
                },
              },
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'renderItem(item, index, ${extParams}) {\n  // 自定义渲染逻辑\n  return null;\n}',
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'rowKey',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Row Key',
                'zh-CN': '唯一标识',
              },
              tip: 'rowKey | 指定每项的唯一 key，可以是字符串或函数',
            },
            propType: {
              type: 'oneOfType',
              value: ['string', 'func'],
            },
            setter: [
              'StringSetter',
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'rowKey(item, index, ${extParams}) {\n  // 返回唯一 key\n  return item.id;\n}',
                },
              },
              'VariableSetter',
            ],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Style',
            'zh-CN': '样式',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            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',
          },
        ],
      },
    ],
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      className: true,
    },
  },
};

/**
 * 组件片段配置
 * @description 用于在组件面板中展示的预设配置
 */
const snippets: IPublicTypeSnippet[] = [
  {
    title: '基础布局',
    screenshot: '',
    schema: {
      componentName: 'PisellBasicGrid',
      props: {
        direction: 'horizontal',
        wrap: 'wrap',
        gap: 16,
      },
    },
  },
  {
    title: '一行四个',
    screenshot: '',
    schema: {
      componentName: 'PisellBasicGrid',
      props: {
        direction: 'horizontal',
        wrap: 'wrap',
        columns: 4,
        gap: 16,
      },
    },
  },
  {
    title: '等分布局',
    screenshot: '',
    schema: {
      componentName: 'PisellBasicGrid',
      props: {
        direction: 'horizontal',
        equalWidth: true,
        gap: 12,
      },
    },
  },
  {
    title: '竖向布局',
    screenshot: '',
    schema: {
      componentName: 'PisellBasicGrid',
      props: {
        direction: 'vertical',
        gap: 16,
      },
    },
  },
];

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