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'));
  return labelAlign === 'horizontal';
};
const itemSetValue = throttle((target: IPublicModelSettingField) => {
  const rowSelection = target.parent.getPropValue('columns');
  // console.log('rowSelection---', value);
  // console.log('设置数据--', rowSelection, value);
  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 || {}),
          ...newComponentProps,
          componentName,
          formType,
          ...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('获取---', value);
  // const hotMap = {};
  // const hotList = target.node?.children?.map((child) => {
  //   const { propsData } = child;
  //   const { primaryKey, ...componentProps } = propsData || {};
  //   const key = primaryKey || uuid();
  //   const childItem = {
  //     primaryKey: key,
  //     componentName: child.componentName,
  //     componentProps,
  //   };
  //   hotMap[key] = childItem;
  //   return childItem;
  // });
  // console.log('hotList--', hotList);
  // const list = value
  //   ? value.map((item) => {
  //       const key = item?.primaryKey;
  //       return hotMap[key] ? hotMap[key] : item;
  //     })
  //   : hotList;
  // console.log('list:', list);
  // return list;

  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);
  });

  return hotList;
};
const ProFormMeta: IPublicTypeComponentMetadata = {
  componentName: 'ProForm',
  group: '精选组件',
  category: '表单类',
  title: 'ProForm',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.0',
    exportName: 'ProForm',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'columns',
            'zh-CN': '表格列',
          },
        },
        name: 'columns',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  type: 'group',
                  display: 'accordion',
                  items: [
                    {
                      name: 'label',
                      type: 'field',
                      title: '文本',
                      isRequired: true,
                      setter: 'StringSetter',
                    },
                    {
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'span',
                          'zh-CN': '列分布',
                        },
                        tip: 'col列布局铺满为24',
                      },
                      name: 'span',
                      isRequired: true,
                      setter: {
                        componentName: 'NumberSetter',
                        props: {
                          min: 0,
                          max: 24,
                        },
                      },
                    },
                    {
                      name: 'formType',
                      title: '列类型',
                      display: 'inline',
                      isRequired: true,
                      setter: {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            { value: 'Input', title: '输入框' },
                            { value: 'Input.Password', title: '密码框' },
                            { value: 'Input.TextArea', title: '文本域' },
                            { value: 'Switch', title: '开关' },
                            { value: 'TreeSelect', title: '下拉树' },
                            { value: 'DatePicker', title: '时间框' },
                            { value: 'DatePicker.RangePicker', title: '时间区间' },
                            { value: 'Select', title: '下拉框' },
                            { value: 'Radio.Group', 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: 'name',
                      title: '数据字段',
                      type: 'field',
                      setter: 'StringSetter',
                    },

                    {
                      name: 'rules.required',
                      title: {
                        label: {
                          type: 'i18n',
                          zh_CN: '是否必填',
                          en_US: 'rules.required',
                        },
                        tip: '注意：数据字段name有值，这个*才生效',
                      },
                      setter: 'BoolSetter',
                    },
                    {
                      name: 'rules.message',
                      title: '错误信息提示',
                      setter: 'StringSetter',
                    },
                  ],
                },
              },
              initialValue: () => {
                return {
                  span: 12,
                  formType: 'Input',
                  label: '页面描述',
                  // placeholder: '请输入',
                  rules: { required: false },
                  primaryKey: uuid(),
                  options: [
                    // 为了兼容单选框组默认不显示问题
                    {
                      label: 'A',
                      value: 'A',
                    },
                    {
                      label: 'B',
                      value: 'B',
                    },
                    {
                      label: 'C',
                      value: 'C',
                    },
                  ],
                };
              },
            },
          },
        },
        getValue: itemGetValue,
        setValue: itemSetValue,
      },
      {
        name: 'advanced',
        title: '高级选项',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'formItemMarginBottom',
                  title: { label: '底部间距', tip: '一排的底部距离' },
                  setter: {
                    componentName: 'NumberSetter',
                    props: {
                      units: 'px',
                    },
                  },
                },
                {
                  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: 'labelAlign',
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'labelAlign',
                      'zh-CN': '对齐方式',
                    },
                    tip: '必须指定文字宽度才能生效',
                  },
                  display: 'inline',
                  condition: showWithLabelAlign,
                  setter: {
                    componentName: 'RadioGroupSetter',
                    props: {
                      options: [
                        {
                          value: 'left',
                          title: '居左',
                        },
                        {
                          value: 'right',
                          title: '居右',
                        },
                      ],
                    },
                  },
                },
                {
                  name: 'width',
                  title: '文字宽度',
                  condition: showWithLabelAlign,
                  setter: {
                    componentName: 'NumberSetter',
                  },
                },
                {
                  name: 'gutter',
                  title: { label: '左右间距间距', tip: '里面子元素左右间距' },
                  setter: {
                    componentName: 'NumberSetter',
                  },
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      events: [
        {
          name: 'goForm',
          template: 'goForm(form){\n  if(form) {\n   this.state.proForm = form\n }\n}\n',
        },
      ],
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '基础表单',
    screenshot: require('./__screenshots__/proForm.png'),
    schema: {
      componentName: 'ProForm',
      props: {},
      children: [
        ...[...new Array(1).keys()].map(() => ({
          componentName: 'Input',
          props: {
            formType: 'Input',
            span: 12,
            label: '页面描述',
            // placeholder: '请输入',
            rules: { required: false },
            primaryKey: uuid(),
          },
        })),
      ],
    },
  },
];

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