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

const ProFormMeta: IPublicTypeComponentMetadata = {
  componentName: 'ProForm',
  title: '表单容器',
  category: '表单',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'pro-material',
    version: '0.1.0',
    exportName: 'ProForm',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'colon',
        title: { label: '展示冒号', tip: '' },
        setter: {
          componentName: 'BoolSetter',
          isRequired: true,
          initialValue: true,
        },
        defaultValue: true,
      },
      {
        name: 'hideRequiredMark',
        title: { label: '隐藏必填标记', tip: '隐藏必填标记' },
        setter: {
          componentName: 'BoolSetter',
          isRequired: true,
          initialValue: true,
        },
        defaultValue: false,
      },
      {
        type: 'group',
        title: '布局',
        display: 'accordion',
        items: [
          {
            name: 'labelCol',
            title: '标签栅格布局设置',
            display: 'inline',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'span',
                      title: '宽度',
                      setter: {
                        componentName: 'NumberSetter',
                        props: {
                          min: 0,
                          max: 24,
                        },
                      },
                    },
                    {
                      name: 'offset',
                      title: '偏移',
                      setter: {
                        componentName: 'NumberSetter',
                        props: {
                          min: 0,
                          max: 24,
                        },
                      },
                    },
                  ],
                },
              },
            },
            description:
              'label 标签布局，同 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效',
          },
          {
            name: 'wrapperCol',
            title: '内容栅格布局设置',
            display: 'inline',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'span',
                      title: '宽度',
                      setter: {
                        componentName: 'NumberSetter',
                        props: {
                          min: 0,
                          max: 24,
                        },
                      },
                    },
                    {
                      name: 'offset',
                      title: '偏移',
                      setter: {
                        componentName: 'NumberSetter',
                        props: {
                          min: 0,
                          max: 24,
                        },
                      },
                    },
                  ],
                },
              },
            },
            description: '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
          },
        ],
      },
      {
        name: 'labelAlign',
        title: {
          label: '标签对齐',
          tip: 'label 标签的文本对齐方式',
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '左',
                value: 'left',
              },
              {
                title: '右',
                value: 'right',
              },
            ],
          },
        },
        defaultValue: 'right',
      },
      {
        name: 'layout',
        title: { label: '表单布局', tip: '表单布局' },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '水平',
                value: 'horizontal',
              },
              {
                title: '垂直',
                value: 'vertical',
              },
              {
                title: '行内',
                value: 'inline',
              },
            ],
          },
        },
        defaultValue: 'horizontal',
      },
      {
        name: 'name',
        title: {
          label: '表单名称',
          tip: '表单名称，会作为表单字段 `id` 前缀使用',
        },
        setter: {
          componentName: 'StringSetter',
          isRequired: false,
          initialValue: '',
        },
      },
    ],
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onValuesChange',
        },
        {
          name: 'onFinishFailed',
        },
        {
          name: 'onFinish',
          description: '@name 表单结束后调用',
        },
        {
          name: 'onInit',
          description: '@name 表单初始化成功，比如布局，label等计算完成',
        },
      ],
    },
    component: {
      isContainer: true,
    },
    advanced: {
      callbacks: {
        onNodeAdd: (dragment, currentNode) => {
          const comps = ['ProFormText'];

          if (
            !dragment ||
            !dragment.componentMeta ||
            !dragment.componentMeta.npm ||
            !dragment.componentMeta.npm.package ||
            dragment.componentMeta.npm.package.indexOf('@alilc/antd-lowcode-materials') === -1 ||
            comps.every((comp) => dragment.componentName.indexOf(comp) === -1)
          ) {
            return;
          }

          // 为目标元素包裹一层P
          // const layoutPNode = currentNode.document.createNode({
          //   componentName: 'Form.Item',
          //   props: {
          //     label: '表单项: ',
          //   },
          //   children: [dragment.exportSchema()],
          // });
          // 当前dragment还未添加入node子节点,需要setTimeout处理
          setTimeout(() => {
            currentNode.replaceChild(
              dragment,
              dragment.exportSchema(),
              // 避免生成新的 nodeId
              { reserveSchemaNodeId: true },
            );
          }, 1);
        },
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    "title": "表单容器",
    "screenshot": "https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-1.png",
    schema: {
      componentName: 'ProForm',
    },
  },
];

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