import snippets from './snippets';
import { createFormItemSchema, formSchema2PisellFieldsOptions, getVariable, getDataSourceValue } from '../data-source-form/utils';

export default {
  snippets,
  componentName: 'FormGroup',
  title: '分组',
  category: '无代码表单',
  group: '无代码组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'FormGroup',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  generalProps: [
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Info',
        'zh-CN': '信息',
      },
      display: 'accordion',
      items: [
        {
          name: 'title',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Title',
              'zh-CN': '标题',
            },
            tip: '标题',
          },
          // display: 'block',
          propType: 'string',
          setter: 'PisellI18nSetter',
        },
        {
          name: 'description',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Description',
              'zh-CN': '描述',
            },
            tip: '描述',
          },
          // display: 'block',
          propType: 'string',
          setter: 'PisellI18nSetter',
        },
      ],
    },
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Data',
        'zh-CN': '数据',
      },
      display: 'accordion',
      items: [
        {
          name: 'dataSource',
          title: {
            type: 'i18n',
            'en-US': 'Source',
            'zh-CN': '数据源',
          },
          display: 'inline',
          extraProps: {
            getValue(target: any) {
              return getDataSourceValue(target);
            },
          },
          setter: {
            componentName: 'PisellDataSourceSetter',
            props: {
              disabled: true,
              filters: {
                tables: 'all',
                variables: {}
              },
            },
          },
        },
        {
          title: '字段',
          display: 'entry',
          type: 'group',
          items: [
            {
              title: {
                type: 'i18n',
                'en-US': 'Fields',
                'zh-CN': '字段',
              },
              name: '_fields',
              propType: 'object',
              display: 'block',
              setter: {
                componentName: 'PisellFieldSetter',
                props: (target: any) => {
                  const formSchema = target.node.parent.schema;
                  const allFields = getVariable(target.node.parent, 'currentFields');
                  const options = formSchema2PisellFieldsOptions(
                    formSchema,
                    allFields
                  );
                  return {
                    options,
                    currentGroup: target.node.id,
                  };
                },
              },
              extraProps: {
                setValue(target: any, value: any) {
                  const { operate } = value;
                  const { field } = operate;
                  if (value.operate.mode === 'hidden') {
                    target.node.document.removeNode(field);
                  } else if (value.operate.mode === 'show') {
                    // 需要追加的元素容器 优先顺序 1.当前表单最后一个分组 -> 2.当前表单
                    let appendContainer = target.node;
                    let lastGroup: any;
                    target.node.children.forEach((item: any) => {
                      if (item.componentName === 'FormGroup') {
                        lastGroup = item;
                      }
                    });
                    appendContainer = lastGroup || appendContainer;
                    // 全部字段
                    const allFields = getVariable(target.node.parent, 'currentFields');

                    const nocobaseField = allFields.find(
                      (item: any) => item.name === field
                    );
                    if (nocobaseField) {
                      const appendSchema = createFormItemSchema(nocobaseField);
                      const appendNode =
                        target.node.document.createNode(appendSchema);
                      appendContainer.children.insert(appendNode);
                    }
                  }
                  return {};
                },
              },
            },
          ],
        },
      ],
    },
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Appearance',
        'zh-CN': '外观',
      },
      display: 'accordion',
      items: [
        {
          name: 'showTitle',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Show group title',
              'zh-CN': '显示分组标题',
            },
            tip: '',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'showDescription',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Show description',
              'zh-CN': '显示分组描述',
            },
            tip: '',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'showBackgroundColor',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Show background color',
              'zh-CN': '显示背景颜色',
            },
            tip: '',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'backgroundColor',
          condition(target) {
            return !!target.getProps().getPropValue('showBackgroundColor');
          },
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Background color',
              'zh-CN': '背景颜色',
            },
            tip: '',
          },
          propType: 'string',
          defaultValue: '#f6f8fc',
          setter: 'ColorSetter',
        },
      ],
    },
  ],
  props: [
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Info',
        'zh-CN': '信息',
      },
      display: 'accordion',
      items: [
        {
          name: 'title',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Title',
              'zh-CN': '标题',
            },
            tip: '标题',
          },
          // display: 'block',
          propType: 'string',
          setter: 'PisellI18nSetter',
        },
        {
          name: 'description',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Description',
              'zh-CN': '描述',
            },
            tip: '描述',
          },
          // display: 'block',
          propType: 'string',
          setter: 'PisellI18nSetter',
        },
      ],
    },
    {
      type: 'group',
      title: {
        type: 'i18n',
        'en-US': 'Appearance',
        'zh-CN': '外观',
      },
      display: 'accordion',
      items: [
        {
          name: 'showTitle',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Show group title',
              'zh-CN': '显示分组标题',
            },
            tip: '',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'showDescription',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Show description',
              'zh-CN': '显示分组描述',
            },
            tip: '',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'showBackgroundColor',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Show background color',
              'zh-CN': '显示背景颜色',
            },
            tip: '',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'backgroundColor',
          condition(target) {
            return !!target.getProps().getPropValue('showBackgroundColor');
          },
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Background color',
              'zh-CN': '背景颜色',
            },
            tip: '',
          },
          propType: 'string',
          defaultValue: '#f6f8fc',
          setter: 'ColorSetter',
        },
      ],
    },
  ],
  configure: {
    component: { isContainer: true },
    supports: {
      style: true,
      events: [],
    },
  },
};