import snippets from './snippets';
import {
  formItemGeneralDataGroup,
  generalItemMap,
  getFormItemGeneralInfoGroup,
  formItemGeneralOptionTypeGroup,
} from '../_utils/defaultSchema';
import { parseXRecordSchemaToChildSchemas } from '../data-source-sub-form/meta';

export default {
  snippets,
  componentName: 'FormItemRecordListWrapper',
  title: '记录列表包装器',
  category: '无代码表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'FormItemRecordListWrapper',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  generalProps: [
    // 数据分组
    formItemGeneralDataGroup,
    // 信息分组
    getFormItemGeneralInfoGroup([
      generalItemMap['label'],
      generalItemMap['placeholder'],
      generalItemMap['tooltip'],
      generalItemMap['extra'],
      generalItemMap['hideLabel'],
      generalItemMap['renderMode'],
      generalItemMap['defaultValue'],
    ]),
    // 选项类型分组
    formItemGeneralOptionTypeGroup,
    // Schema 分组
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Schema',
        'zh-CN': 'Schema',
      },
      display: 'accordion',
      items: [
        {
          name: 'xRecordSchema',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Record Schema',
              'zh-CN': '记录字段配置',
            },
            tip: {
              type: 'i18n',
              'en-US':
                'Define the fields for each record. When configured, the system will automatically generate form fields based on the schema. You can also manually drag form items into the container.',
              'zh-CN':
                '定义每条记录的字段结构。配置后，系统会自动根据 Schema 生成表单字段。你也可以手动拖拽表单项到容器中。',
            },
          },
          propType: 'string',
          setter: 'JsonSetter',
          description: `
示例配置：
[
  {
    "name": "code",
    "uiSchema": {
      "title": "代码",
      "x-component": "Input",
      "x-component-props": {
        "placeholder": "请输入代码"
      }
    }
  },
  {
    "name": "type",
    "uiSchema": {
      "title": "类型",
      "x-component": "Select",
      "enum": [
        { "label": "类型A", "value": "a" },
        { "label": "类型B", "value": "b" }
      ]
    }
  }
]
          `,
          extraProps: {
            /**
             * 当 xRecordSchema 值变化时，解析 JSON 并生成子组件节点
             */
            setValue(target: any, value: any) {
              const result = target
                .getProps()
                .setPropValue('xRecordSchema', value);

              const parsedSchemas = parseXRecordSchemaToChildSchemas(value);

              // 先清空现有子节点，避免第二次及之后调用时 importSchema 做 diff/merge 导致节点数量异常
              target.node.children.importSchema([]);
              // 节点刚添加时可能尚未挂载完成，用 setTimeout 错开时序
              setTimeout(() => {
                target.node.children.importSchema(parsedSchemas);
                // replaceSchema 后有概率不触发重渲染，手动 rerender
                setTimeout(() => {
                  target.document?.project?.simulatorHost?.rerender();
                });
              });

              return result;
            },
          },
        },
      ],
    },
    // 插槽分组
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Slot',
        'zh-CN': '插槽',
      },
      display: 'accordion',
      items: [
        {
          name: 'topSlot',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Tab Area',
              'zh-CN': 'Tab 区域',
            },
            tip: {
              type: 'i18n',
              'en-US':
                'Drag a component here to customize the tab navigation. The component will receive options, value, and onChange props.',
              'zh-CN':
                '拖入自定义组件来替换默认 Tab 导航。组件会自动接收 options、value、onChange 属性。',
            },
          },
          setter: {
            componentName: 'SlotSetter',
            initialValue: {
              type: 'JSSlot',
              value: [],
            },
          },
        },
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      events: [
        { name: 'onChange', template: 'onChange(value,${extParams}){}' },
      ],
    },
    advanced: {
      callbacks: {
        // 当拖入新组件时的回调
        onNodeAdd: (dragment: any, currentNode: any) => {
          console.log('RecordListWrapper: 新增子组件', dragment?.componentName);
        },
      },
    },
  },
};