import React from 'react';
import { Bundle } from '@ali/visualengine';
import { DisplayPosition } from '@/type/display-position';
import Icon from './logo';
import {
  createFooterSetters,
  createFormDefaultValueSetters,
  createFormItemSetters,
} from './form-item';
import { ButtonPosition } from '@/type/button-position';
import { createButtonListSetters } from '@/common/manager/button';
import {
  createDataSourceSetters,
  createFormStyleSetters,
} from '@/common/manager/setter-snippet';
import {
  handleDesignFormConfig,
  removeDataSourceByNode,
} from '@/common/util/util';

// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
  title: '表单',
  componentName: 'CnForm',
  category: '表单',
  icon: Icon,
  docUrl: '',
  onNodeRemoveByUser(node) {
    removeDataSourceByNode(node);
  },
  configure: [
    {
      name: 'isCnForm',
      title: 'cnForm',
      initialValue: true,
      display: 'none',
    },
    {
      name: '_context',
      title: '上下文',
      initialValue: {
        type: 'JSExpression',
        value: 'this',
      },
      display: 'none',
    },
    {
      name: 'title',
      title: '表单名称',
      display: 'inline',
      initialValue: '表单1',
      tip: '当前表单的名称，方便检索使用',
      setter: 'StringSetter',
    },
    {
      name: 'config',
      title: '表单项配置',
      display: 'accordion',
      initialValue: [
        {
          label: '卡片',
          name: 'card',
          componentName: 'CnCard',
          options: {
            desc: '外标题说明',
            subTitle: '内标题',
            subDesc: '内标题说明',
          },
        },
        {
          label: '文本输入',
          name: 'input',
          componentName: 'CnInput',
          options: {},
        },
      ],
      mutator(value) {
        const nodeId = this?.getNode?.()?._id;
        setTimeout(() => {
          if (nodeId && Array.isArray(value)) {
            handleDesignFormConfig({
              newFormConfig: value,
              nodeId,
            });
          }
        });
      },
      setter: createFormItemSetters({ position: DisplayPosition.form }),
      // supportVariable: true,
    },
    {
      name: 'buttons',
      title: '底部按钮栏',
      display: 'accordion',
      initialValue: [
        {
          primaryKey: 'reset',
          children: '重置',
          optType: 'reset',
        },
        {
          children: '提交',
          optType: 'submit',
          primaryKey: 'submit',
          type: 'primary',
        },
      ],
      // supportVariable: true,
      setter: createButtonListSetters({ position: ButtonPosition.form }),
    },
    {
      name: 'formStyle',
      display: 'accordion',
      title: '表单样式',
      collapsed: true,
      extraProps: {
        defaultCollapsed: true,
      },
      setter: {
        componentName: 'ObjectSetter',
        props: {
          config: {
            items: [...createFormStyleSetters()],
          },
        },
      },
    },
    ...createFormDefaultValueSetters({
      afterRequestSuccessPosition:
        ButtonPosition.formDefaultValueAfterRequestSuccess,
      position: DisplayPosition.form,
    }),
    {
      title: '高级配置',
      type: 'group',
      collapsed: true,
      display: 'accordion',
      items: [...createDataSourceSetters()],
    },
    // {
    //   name: 'hasFooterSubmit',
    //   title: '是否存在底部提交',
    //   display: 'accordion',
    //   // collapsed:false,
    //   initialValue: true,
    //   supportVariable: true,
    //   setter: <BoolSetter />,
    // },
    // {
    //   name: 'resetProps',
    //   title: '重置按钮配置',
    //   display: 'accordion',
    //   initialValue: {
    //     children: '重置',
    //     type: 'normal',
    //   },
    //   setter: {
    //     componentName: 'ObjectSetter',
    //     props: {
    //       config: {
    //         items: createFooterSetters(),
    //       },
    //     },
    //   },
    // },
    // {
    //   name: 'submitProps',
    //   title: '提交按钮配置',
    //   display: 'accordion',
    //   initialValue: {
    //     children: '提交',
    //     type: 'primary',
    //   },
    //   setter: {
    //     componentName: 'ObjectSetter',
    //     props: {
    //       config: {
    //         items: createFooterSetters(),
    //       },
    //     },
    //   },
    // },
  ],
});