import {
  IPublicTypeComponentMetadata,
  IPublicTypeSnippet,
  IPublicModelSettingField,
} from '@alilc/lowcode-types';
import { throttle } from 'lodash';
import { uuid, getInitialPropsItem } from '../utils/index';

const showWithLabelAlign = (target) => {
  const parentLabelAlign = target && target.parent.node.parent.getPropValue('layout');
  const labelAlign = parentLabelAlign || (target && target.parent.getPropValue('layout'));
  if (labelAlign === 'vertical') {
    const enableLabelTip = target.parent.getPropValue('labelTip.enable');
    if (enableLabelTip) {
      return target.name.startsWith('labelTip');
    }
    return target.name === 'labelTip.enable';
  }
  if (labelAlign === 'inset') {
    return target.name.startsWith('wrapper');
  }
  if (labelAlign === 'left') {
    return !target.name.startsWith('labelTip');
  }
  return true;
};
const itemSetValue = throttle((target: IPublicModelSettingField) => {
  const rowSelection = target.parent.getPropValue('state');
  // console.log('设置数据--', rowSelection);
  const { node } = target;
  const mergedValueMap = {};
  const mergedValues: any = [];
  const map = {};
  rowSelection.forEach((item) => {
    if (item.primaryKey === undefined) return;
    if (!mergedValueMap[item.primaryKey]) {
      mergedValueMap[item.primaryKey] = item;
      mergedValues.push(item);
    }
    const FormItem = Object.assign({}, item);

    map[item.primaryKey] = FormItem;
  });
  // console.log('map:', map);

  node?.children?.mergeChildren(
    (child) => {
      // 删除
      const primaryKey = child.getPropValue('primaryKey');
      if (Object.hasOwnProperty.call(map, primaryKey)) {
        const { componentName, formType, componentProps, ...otherProps } = map[primaryKey];
        const newComponentProps = getInitialPropsItem(componentName, componentProps);
        // 保持子数据不变...(child.propsData || {})核心，但是必须每次新增才走这个逻辑
        const newProps = {
          ...(child.propsData || {}),
          componentName,
          formType,
          ...newComponentProps,
          ...otherProps,
        };
        // 替换子集的节点
        node.replaceChild(child, {
          componentName: formType || componentName,
          props: newProps,
        });
        delete map[primaryKey];
        return false;
      }
      return true;
    },
    () => {
      // 新增
      const items: any[] = [];
      for (const primaryKey in map) {
        if (Object.hasOwnProperty.call(map, primaryKey)) {
          const { componentName, formType, ...otherProps } = map[primaryKey];
          const newProps = {
            formType,
            ...otherProps,
          };

          items.push({
            componentName: formType || componentName,
            props: newProps,
          });
        }
      }
      return items;
    },
    (child1, child2) => {
      const a = mergedValues.findIndex(
        (item) => String(item.primaryKey) === String(child1.getPropValue('primaryKey')),
      );
      const b = mergedValues.findIndex(
        (item) => String(item.primaryKey) === String(child2.getPropValue('primaryKey')),
      );
      return a - b;
    },
  );
});
const itemGetValue = (target: IPublicModelSettingField) => {
  // console.log('获取数据--', target.node?.children, value);

  const hotList: any = [];
  target.node?.children?.forEach((child) => {
    const { propsData } = child;
    const { primaryKey, ...componentProps } = propsData || {};
    const key = primaryKey || uuid();
    const childItem = {
      componentName: child.componentName,
      ...componentProps,
      primaryKey: key,
    };
    hotList.push(childItem);
  });
  // console.log('hotList---', hotList);
  return hotList;
};
const ProFilterMeta: IPublicTypeComponentMetadata = {
  componentName: 'ProFilter',
  group: '精选组件',
  category: '表格类',
  title: 'ProFilter',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.21',
    exportName: 'ProFilter',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'state',
            'zh-CN': '表单项',
          },
        },
        name: 'state',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'title',
                          'zh-CN': '标题',
                        },
                      },
                      name: 'title',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                      },
                    },

                    {
                      name: 'formType',
                      title: '数据类型',
                      display: 'inline',
                      isRequired: true,
                      setter: {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            { value: 'Input', title: '输入框' },
                            { value: 'Input.Password', title: '密码框' },
                            { value: 'DatePicker', title: '时间框' },
                            { value: 'DatePicker.RangePicker', title: '时间区间' },
                            { value: 'Select', title: '下拉框' },
                            { value: 'TreeSelect', title: '下拉树' },
                            { value: 'InputBetween', title: '输入区间' },
                          ],
                        },
                      },
                    },
                    {
                      name: 'formatOptions',
                      title: '时间格式',
                      display: 'inline',
                      defaultValue: 'YYYY-MM-DD HH:mm:ss',
                      condition: (target) => {
                        return (
                          target.parent.getPropValue('formType') === 'DatePicker' ||
                          target.parent.getPropValue('formType') === 'DatePicker.RangePicker'
                        );
                      },
                      getValue: (target, value) => {
                        return value;
                      },
                      setter: {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            { value: 'YYYY-MM-DD HH:mm:ss', title: '年-月-日 时:分:秒' },
                            { value: 'YYYY-MM-DD HH:mm', title: '年-月-日 时:分' },
                            { value: 'YYYY-MM-DD', title: '年-月-日' },
                            { value: 'YYYY-MM', title: '年-月' },
                            { value: 'YYYY', title: '年' },
                          ],
                        },
                      },
                    },
                    {
                      name: 'seleteList',
                      title: {
                        label: {
                          type: 'i18n',
                          zh_CN: '下拉数据源',
                        },
                        tip: {
                          type: 'i18n',
                          zh_CN: '属性: value,label | 说明: 下拉字段字段只能是value,label',
                        },
                      },
                      condition: (target) => {
                        const type = target && target.parent.getPropValue('type');
                        if (type === 'selete') {
                          return true;
                        }
                        return false;
                      },
                      setter: ['VariableSetter'],
                    },
                    {
                      name: 'name',
                      title: '数据字段',
                      display: 'inline',
                      initialValue: (currentValue, defaultValue) =>
                        currentValue || defaultValue || `data-${uuid()}`,
                      setter: 'StringSetter',
                    },
                    // {
                    //   name: 'placeholder',
                    //   title: '默认描述',
                    //   extraProps: {
                    //     display: 'inline',
                    //     defaultValue: false,
                    //   },
                    //   setter: 'StringSetter',
                    // },
                    {
                      name: 'align',
                      title: '对齐方式',
                      display: 'inline',
                      initialValue: 'left',
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            {
                              value: 'left',
                              title: '居左',
                            },
                            {
                              value: 'center',
                              title: '居中',
                            },
                            {
                              value: 'right',
                              title: '居右',
                            },
                          ],
                        },
                      },
                    },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
              initialValue: () => {
                return {
                  title: '标题',
                  formType: 'Input',
                  primaryKey: uuid(),
                };
              },
            },
          },
          isRequired: true,
          initialValue: [],
        },
        getValue: itemGetValue,
        setValue: itemSetValue,
      },
      {
        name: 'globalConfig',
        title: '全局配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            name: 'formItemMarginBottom',
            title: { label: '底部间距', tip: '一排的底部距离' },
            setter: {
              componentName: 'NumberSetter',
              props: {
                units: 'px',
              },
            },
          },
          {
            name: 'columns',
            title: '布局',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '二列',
                    value: 12,
                  },
                  {
                    title: '三列',
                    value: 8,
                  },
                  {
                    title: '四列',
                    value: 6,
                  },
                  {
                    title: '六列',
                    value: 4,
                  },
                ],
              },
              initialValue: 6,
            },
          },
          {
            name: 'layout',
            title: {
              label: {
                type: 'i18n',
                zh_CN: '标签位置',
                en_US: 'Label Align',
              },
              tip: {
                type: 'i18n',
                zh_CN: '属性: layout | 说明: 标签的位置\n@enumdesc 上, 左, 内',
                en_US: 'prop: layout | description: label align',
              },
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '上',
                    value: 'vertical',
                  },
                  {
                    title: '左',
                    value: 'horizontal',
                  },
                ],
              },
              initialValue: 'horizontal',
            },
          },
          {
            name: 'visibility',
            title: { label: '是否显示冒号', tip: '：是否显示' },
            condition: showWithLabelAlign,
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            name: 'fixedSpan',
            title: '标题宽度',
            condition: showWithLabelAlign,
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 24,
              },
              initialValue: 4,
            },
          },
          {
            name: 'labelTextAlign',
            condition: showWithLabelAlign,
            title: {
              label: {
                type: 'i18n',
                zh_CN: '标签对齐',
                en_US: 'Text Align',
              },
              tip: {
                type: 'i18n',
                zh_CN: '属性: labelAlign | 说明: 标签的左右对齐方式\n@enumdesc 左, 右',
                en_US: 'prop: labelAlign | description: label text align',
              },
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: ['left', 'right'],
              },
            },
          },
          {
            name: 'buttonAlign',
            title: {
              label: {
                type: 'i18n',
                zh_CN: '按钮位置',
                en_US: 'buttonAlign',
              },
              tip: {
                type: 'i18n',
                zh_CN: '属性: buttonAlign | 说明: 按钮的对齐方式\n@enumdesc 左, 右',
                en_US: 'prop: buttonAlign | description: buttonAlign',
              },
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: ['left', 'right'],
              },
            },
            defaultValue: 'right',
          },
          {
            name: 'gutter',
            title: { label: '左右间距间距', tip: '里面子元素左右间距' },
            setter: {
              componentName: 'NumberSetter',
            },
          },
        ],
      },
      {
        name: 'confirmStyle',
        title: '主按钮样式',
        type: 'group',
        extraProps: {
          display: 'entry',
        },
        items: [
          {
            name: 'confirmStyle',
            title: {
              label: '主按钮样式',
              tip: 'confirmStyle | 主按钮样式',
            },
            setter: 'StyleSetter',
            extraProps: {
              display: 'block',
            },
          },
        ],
      },
      {
        name: 'resetStyle',
        title: '次按钮样式',
        type: 'group',
        extraProps: {
          display: 'entry',
        },
        items: [
          {
            name: 'resetStyle',
            title: {
              label: '次按钮样式',
              tip: 'resetStyle | 次按钮样式',
            },
            setter: 'StyleSetter',
            extraProps: {
              display: 'block',
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
      // 支持事件列表
      events: [
        'onSubmit',
        'onReset',
        {
          name: 'goForm',
          template: 'goForm(form){\n  if(form) {\n   this.state.searcherForm = form\n }\n}\n',
        },
      ],
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '查询筛选',
    screenshot: require('./__screenshots__/proFilter.png'),
    schema: {
      componentName: 'ProFilter',
      props: {
        confirmStyle: {
          marginLeft: '10px',
        },
        labelTextAlign: 'right',
        buttonAlign: 'left',
      },
      children: [
        ...[...new Array(1).keys()].map(() => ({
          componentName: 'Input',
          props: {
            title: '标题',
            formType: 'Input',
          },
        })),
      ],
    },
  },
];

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