import { SelectorPropsConfig } from '../selector/meta';

function uuid() {
  return ((Math.random() * 1e6) >> 0).toString(36);
}

const SelectorGroupMeta = {
  componentName: 'Selector.Group',
  title: 'Selector Group',
  category: '表单',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.0',
    exportName: 'Selector',
    main: 'src/index.ts',
    destructuring: true,
    subName: 'Group',
  },
  configure: {
    props: [
      // 数据源配置
      {
        name: 'dataSource',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Data Source',
            'zh-CN': '数据源',
          },
          tip: '分组数据列表，每个分组包含选项配置',
        },
        setter: [
          'JsonSetter',
          {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: SelectorPropsConfig,
                  },
                },
                initialValue: () => {
                  const id = uuid();
                  return {
                    id: `group_${id}`,
                    title: `分组 ${id}`,
                    dataSource: [
                      { label: `选项 1`, value: `${id}_option1` },
                      { label: `选项 2`, value: `${id}_option2` },
                    ],
                    mode: 'single',
                    valueType: 'primitive',
                    preset: {
                      variant: '1',
                    },
                    renderItem: {
                      type: 'JSSlot',
                      params: ['renderProps'],
                      value: [
                        {
                          componentName: 'Selector.Item',
                          props: {
                            type: 'JSExpression',
                            value: 'this.renderProps',
                            mock: '主按钮',
                          },
                        },
                      ],
                    },
                  };
                },
              },
            },
          },
        ],
        isRequired: true,
      },
      // 值控制
      {
        name: 'value',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Value',
            'zh-CN': '当前值',
          },
          tip: '受控值，Record<string, SelectionValue>格式',
        },
        setter: 'JsonSetter',
      },
      {
        name: 'defaultValue',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Default Value',
            'zh-CN': '默认值',
          },
          tip: '默认值，Record<string, SelectionValue>格式',
        },
        setter: 'JsonSetter',
      },
      // 规则配置
      {
        name: 'linkageRules',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Linkage Rules',
            'zh-CN': '跨组规则',
          },
          tip: '跨组规则集合，支持数组或语法糖对象格式',
        },
        setter: 'JsonSetter',
      },
      {
        name: 'allowedValuesPolicy',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Allowed Values Policy',
            'zh-CN': '值处理策略',
          },
          tip: '允许值集合的处理策略',
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              { title: 'relaxed', value: 'relaxed' },
              { title: 'strict', value: 'strict' },
            ],
          },
          initialValue: 'relaxed',
        },
      },
      {
        name: 'preserve',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Preserve',
            'zh-CN': '保留状态',
          },
          tip: '是否保留组件内部状态',
        },
        setter: 'BoolSetter',
        defaultValue: false,
      },
      // UI配置
      {
        name: 'tabProps',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Tab Props',
            'zh-CN': '标签页配置',
          },
          tip: '标签页相关配置',
        },
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'visible',
                  title: '显示标签页',
                  setter: 'BoolSetter',
                  defaultValue: true,
                },
              ],
            },
          },
        },
      },
      {
        name: 'customScrollParent',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Custom Scroll Parent',
            'zh-CN': '自定义滚动父元素',
          },
          tip: '自定义滚动容器元素',
        },
        setter: 'StringSetter',
      },
      {
        name: 'theme',
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Theme',
            'zh-CN': '主题',
          },
        },
        setter: {
          componentName: 'JsonSetter',
        },
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(values,${extParams}){ console.log('onChange', values); }",
        },
      ],
    },
    component: {},
  },
};

const snippets = [
  {
    title: 'Selector Group',
    screenshot: '',
    schema: {
      componentName: 'Selector.Group',
      props: {
        dataSource: [
          {
            id: 'group_1',
            title: '分组 1',
            dataSource: [
              { label: '选项 1', value: 'group1_option1' },
              { label: '选项 2', value: 'group1_option2' },
            ],
            mode: 'single',
            valueType: 'primitive',
            preset: {
              variant: '1',
            },
            renderItem: {
              type: 'JSSlot',
              params: ['renderProps'],
              value: [
                {
                  componentName: 'Selector.Item',
                  props: {
                    type: 'JSExpression',
                    value: 'this.renderProps',
                    mock: '主按钮',
                  },
                },
              ],
            },
          },
          {
            id: 'group_2',
            title: '分组 2',
            dataSource: [
              { label: '选项 1', value: 'group2_option1' },
              { label: '选项 2', value: 'group2_option2' },
            ],
            mode: 'multiple',
            valueType: 'object',
            preset: {
              variant: '1',
            },
            renderItem: {
              type: 'JSSlot',
              params: ['renderProps'],
              value: [
                {
                  componentName: 'Selector.Item',
                  props: {
                    type: 'JSExpression',
                    value: 'this.renderProps',
                    mock: '主按钮',
                  },
                },
              ],
            },
          },
        ],
        allowedValuesPolicy: 'relaxed',
        preserve: false,
        tabProps: {
          visible: true,
        },
      },
    },
  },
];

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