import React from 'react';
import { Bundle } from '@ali/visualengine';
import Icon from './logo';
import {
  createDataSource,
  generateIndex,
  getDataSourceById,
  getDataSourceList,
  uuid,
} from '@/common/util/util';
import {
  dataOriginRequest,
  dataOriginStatic,
  pageDataSource,
} from '@/common/util/const';
import IdSetter from '@/common/setter/id-setter';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { createFlowListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/type/button-position';
import CheckboxSetter from '@/common/setter/checkbox-setter';
import ExprSetter from '@/common/setter/expr-setter';
import { __dataSource__ } from '@/common/util/expr-const';
import {
  getDataOriginSetterSnippet,
  getStaticDataSourceSnippet,
} from '@/common/manager/setter-snippet';

export default Bundle.createPrototype({
  title: '页面',
  componentName: 'CnPage',
  // category: '自定义',
  canOperating: false,
  icon: Icon,
  docUrl: '',
  isInline: false,
  isContainer: true,
  snippets: [
    {
      screenshot:
        'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
      label: 'CnPage',
      schema: {
        componentName: 'CnPage',
        props: {},
      },
    },
  ],
  configure: [
    {
      name: 'isCnPage',
      title: 'isCnPage',
      initialValue: true,
      display: 'none',
    },
    {
      name: '_context',
      title: '上下文',
      initialValue: {
        type: 'JSExpression',
        value: 'this',
      },
      display: 'none',
    },
    {
      title: '样式',
      type: 'group',
      display: 'accordion',
      items: [
        {
          name: 'noPadding',
          title: '页面无内边距模式',
          display: 'inline',
          setter: 'BoolSetter',
        },
        {
          name: 'hasCnFormFooterSubmit',
          title: '预留表单吸底按钮空间',
          display: 'inline',
          setter: 'BoolSetter',
        },
      ],
    },
    {
      title: '页面渲染完成的回调',
      name: 'componentDidMount',
      display: 'plain',
      setter: {
        componentName: 'ObjectSetter',
        props: {
          config: {
            items: [
              {
                name: 'requestList',
                title: '页面数据源列表（state）',
                display: 'block',
                extraProps: {
                  setValue(target, value) {
                    if (value && Array.isArray(value)) {
                      let dataSourceList = getDataSourceList() || [];
                      dataSourceList = dataSourceList.filter((item) => {
                        if (
                          item?.dataSourceId &&
                          item.dataSourceId?.startsWith?.(pageDataSource)
                        ) {
                          return true;
                        }
                      });
                      const existPageDataSourceMap = {};
                      const toRemovePageDataSourceMap = {};
                      dataSourceList.forEach((item) => {
                        const { dataSourceId } = item;
                        if (dataSourceId) {
                          existPageDataSourceMap[dataSourceId] = item;
                          toRemovePageDataSourceMap[dataSourceId] = item;
                        }
                      });
                      for (const item of value) {
                        if (item) {
                          const { id, name, description } = item;
                          if (id) {
                            if (existPageDataSourceMap[id]) {
                              const {
                                value: dsValue,
                                label,
                                id: realDsId,
                              } = existPageDataSourceMap[id];
                              delete toRemovePageDataSourceMap[id];
                              if (label === description && name === dsValue) {
                              } else {
                                const ds = getDataSourceById(realDsId);
                                if (ds) {
                                  const oldDsConfig = ds.getConfig();
                                  if (oldDsConfig) {
                                    ds.setConfig({
                                      ...oldDsConfig,
                                      name,
                                      description,
                                    });
                                  }
                                }
                              }
                            } else {
                              const newDs = createDataSource(item);
                            }
                          }
                        }
                      }
                      for (const pageDsId in toRemovePageDataSourceMap) {
                        const toRemoveItem =
                          toRemovePageDataSourceMap[pageDsId];
                        if (toRemoveItem?.id) {
                          VisualEngine?.context
                            ?.getManager?.('dataPool')
                            ?.removeItem?.(toRemoveItem.id);
                        }
                      }
                    }
                  },
                },
                // mutator(value) {
                // },
                setter: {
                  componentName: 'ArraySetter',
                  props: {
                    mode: 'list',
                    itemSetter: {
                      componentName: 'ObjectSetter',
                      initialValue(prop) {
                        const defaultName = 'data';
                        const defaultDescription = '数据';
                        const initialValue = {
                          id: `${pageDataSource}_${uuid(6)}`,
                          description: defaultDescription,
                          name: defaultName,
                          dataOrigin: dataOriginRequest,
                        };
                        if (prop) {
                          const existFields = prop.getValue() || [];
                          if (existFields?.length > 0) {
                            const newNameIndex = generateIndex(
                              existFields,
                              defaultName,
                              'name',
                            );
                            initialValue.description = `${defaultDescription}${newNameIndex}`;
                            initialValue.name = `${defaultName}${newNameIndex}`;
                          }
                        }
                        return initialValue;
                      },
                      props: {
                        config: {
                          items: [
                            {
                              name: 'id',
                              title: 'id',
                              display: 'inline',
                              setter: <IdSetter />,
                            },
                            {
                              name: 'description',
                              display: 'inline',
                              title: '数据名称',
                              isRequired: true,
                              setter: 'StringSetter',
                            },
                            {
                              name: 'name',
                              display: 'inline',
                              title: '数据编码',
                              isRequired: true,
                              setter: 'StringSetter',
                            },
                            getDataOriginSetterSnippet({
                              initialValue: 'request',
                              display: 'inline',
                              defaultValue: 'request',
                            }),
                            {
                              condition(prop) {
                                return (
                                  prop?.parent?.getValue?.().dataOrigin !==
                                  dataOriginStatic
                                );
                              },
                              name: 'requestConfig',
                              display: 'inline',
                              isRequired: true,
                              title: '请求API',
                              setter: {
                                componentName: 'ServiceChoiceSetter',
                                props: {
                                  mockDataTemplate: {
                                    success: true,
                                    data: {
                                      tableData: [
                                        {
                                          name: 'aa',
                                          age: 18,
                                        },
                                      ],
                                      paging: {
                                        currentPage: 1,
                                        pageSize: 10,
                                        totalCount: 1,
                                      },
                                    },
                                  },
                                  buttonText: 'API',
                                  params: {
                                    env: 'pre',
                                    pageSize: 999,
                                    // serviceType: 'HSF',
                                  },
                                  resultProcessFuncTemplate: `function(res, state) {
  // 当前函数会将请求结果存储到当前数据上
  return res.data;
}`,
                                  paramSetter: [
                                    {
                                      componentName: 'ParamSelectSetter',
                                      props: {
                                        dataKey: 'aa',
                                        labelKey: 'aa',
                                        valueKey: 'aa',
                                        groupName: '参数列表',
                                      },
                                      title: '选择参数',
                                    },
                                    {
                                      componentName: 'StringSetter',
                                      title: '字符串',
                                    },
                                    getJSExpressionPrototype({ type: 'base' }),
                                  ],
                                },
                              },
                            },
                            {
                              name: 'dataSource',
                              title: '编辑静态数据',
                              display: 'plain',
                              className: 'cn-datasource-relative-setter',
                              setter: getStaticDataSourceSnippet(),
                              condition(prop) {
                                return (
                                  prop?.parent?.getValue?.().dataOrigin ===
                                  dataOriginStatic
                                );
                              },
                            },
                            {
                              // condition(prop){
                              //   return prop?.parent?.getValue?.().dataOrigin !== dataOriginStatic
                              // },
                              name: 'deferPageRender',
                              display: 'inline',
                              title: '请求完成后再渲染页面',
                              setter: 'BoolSetter',
                            },
                          ],
                        },
                      },
                    },
                  },
                },
              },
              {
                title: '页面初始动作列表',
                name: 'actionList',
                display: 'block',
                setter: createFlowListSetters({
                  position: ButtonPosition.pageDidMount,
                  activeSetter: {
                    componentName: 'MixedSetter',
                    props: {
                      setters: [
                        {
                          componentName: (
                            <ExprSetter
                              configList={[
                                {
                                  groupName: '其他数据',
                                  groupExprName: __dataSource__,
                                  needSecondParam: true,
                                },
                              ]}
                            />
                          ),
                          title: '简单表达式',
                        },
                        {
                          componentName: <CheckboxSetter />,
                          title: '启用/禁用',
                        },
                        getJSExpressionPrototype({ type: 'base' }),
                      ],
                    },
                  },
                }),
              },
            ],
          },
        },
      },
    },
  ],
});