"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.array.flat-map.js");
require("core-js/modules/es.array.unscopables.flat-map.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.regexp.exec.js");
var _react = require("react");
var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
var _useMergedState = _interopRequireDefault(require("rc-util/es/hooks/useMergedState"));
var _row = _interopRequireDefault(require("../row"));
var _col = _interopRequireDefault(require("../col"));
var _form = _interopRequireDefault(require("../form"));
var _divider = _interopRequireDefault(require("../divider"));
var _wauProvider = require("../wau-provider");
var _utils = require("../utils");
var _wauBaseForm = _interopRequireDefault(require("../wau-base-form"));
var _actions = _interopRequireDefault(require("./actions"));
require("./style");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable no-param-reassign */

const CONFIG_SPAN_BREAKPOINTS = {
  xs: 513,
  sm: 513,
  md: 785,
  lg: 1057,
  xl: 1057,
  xxl: Infinity
};
/** 配置表单列变化的容器宽度断点 */
const BREAKPOINTS = {
  vertical: [
  // [breakpoint, cols, layout]
  [513, 1, 'vertical'], [785, 2, 'vertical'], [1057, 3, 'vertical'], [Infinity, 4, 'vertical']],
  default: [[513, 1, 'vertical'], [701, 2, 'vertical'], [1062, 3, 'horizontal'], [1632, 3, 'horizontal'], [Infinity, 4, 'horizontal']]
};

/**
 * 合并用户和默认的配置
 *
 * @param layout
 * @param width
 */
const getSpanConfig = (layout, width, span) => {
  if (width === 16) {
    return {
      span: 8,
      layout: 'inline'
    };
  }
  if (span && typeof span === 'number') {
    return {
      span,
      layout
    };
  }
  const spanConfig = span ? Object.keys(span).map(key => [CONFIG_SPAN_BREAKPOINTS[key], 24 / span[key], 'horizontal']) : BREAKPOINTS[layout || 'default'];
  const breakPoint = (spanConfig || BREAKPOINTS.default).find(item => width < item[0] + 16 // 16 = 2 * (ant-row -8px margin)
  );

  return {
    span: 24 / breakPoint[1],
    layout: breakPoint[2]
  };
};
const flatMapItems = (items, ignoreRules) => {
  return items.flatMap(item => {
    var _item$props;
    if ((item === null || item === void 0 ? void 0 : item.type.displayName) === 'ProForm-Group' && !((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.title)) {
      return item.props.children;
    }
    if (ignoreRules && /*#__PURE__*/(0, _react.isValidElement)(item)) {
      var _item$props2;
      return /*#__PURE__*/(0, _react.cloneElement)(item, {
        ...item.props,
        formItemProps: {
          ...((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.formItemProps),
          rules: []
        }
      });
    }
    return item;
  });
};
const QueryFilterContent = props => {
  const intl = (0, _wauProvider.useIntl)();
  const resetText = props.resetText || intl.getMessage('tableForm.reset', '重置');
  const searchText = props.searchText || intl.getMessage('tableForm.search', '搜索');
  const [collapsed, setCollapsed] = (0, _useMergedState.default)(() => props.defaultCollapsed && !!props.submitter, {
    value: props.collapsed,
    onChange: props.onCollapse
  });
  const {
    optionRender,
    collapseRender,
    split,
    items,
    spanSize,
    showLength
  } = props;
  const submitter = (0, _react.useMemo)(() => {
    if (!props.submitter) {
      return null;
    }
    return /*#__PURE__*/(0, _react.cloneElement)(props.submitter, {
      searchConfig: {
        resetText,
        submitText: searchText
      },
      render: optionRender ? (_, dom) => optionRender({
        ...props,
        resetText,
        searchText
      }, props, dom) : optionRender,
      ...props.submitter.props
    });
  }, [props, resetText, searchText, optionRender]);

  // totalSpan 统计控件占的位置，计算 offset 保证查询按钮在最后一列
  let totalSpan = submitter ? spanSize.span : 0;
  const itemLength = items.length;

  // for split compute
  let currentSpan = submitter ? spanSize.span : 0;

  /** 是否需要展示 collapseRender */
  const needCollapseRender = itemLength - 1 >= showLength;
  const doms = flatMapItems(items, props.ignoreRules).map((item, index) => {
    var _item, _item$props3, _item2, _item2$props, _props;
    // 如果 formItem 自己配置了 hidden，默认使用它自己的
    const hidden = ((_item = item) === null || _item === void 0 ? void 0 : (_item$props3 = _item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.hidden) ||
    // 如果收起了
    collapsed &&
    // 如果 超过显示长度 且 总长度超过了 24
    index >= showLength && totalSpan >= 24;
    const colSize = /*#__PURE__*/(0, _react.isValidElement)(item) ? (_item2 = item) === null || _item2 === void 0 ? void 0 : (_item2$props = _item2.props) === null || _item2$props === void 0 ? void 0 : _item2$props.colSize : 1;
    const colSpan = Math.min(spanSize.span * (colSize || 1), 24);

    // 每一列的key, 一般是存在的
    const itemKey = /*#__PURE__*/(0, _react.isValidElement)(item) && (item.key || `${(_props = item.props) === null || _props === void 0 ? void 0 : _props.name}`) || index;
    currentSpan += colSpan;
    if ( /*#__PURE__*/(0, _react.isValidElement)(item) && hidden) {
      if (!props.preserve) {
        return null;
      }
      return /*#__PURE__*/(0, _react.cloneElement)(item, {
        hidden: true,
        key: itemKey || index
      });
    }
    if (24 - totalSpan % 24 < colSpan) {
      // 如果当前行空余位置放不下，那么折行
      totalSpan += 24 - totalSpan % 24;
    }
    totalSpan += colSpan;
    if ( /*#__PURE__*/(0, _react.isValidElement)(item)) {
      const itemProps = Object.assign({}, item.props);
      delete itemProps.colSize;
      item = /*#__PURE__*/(0, _react.createElement)(item.type, itemProps);
    }
    const colItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_col.default, {
      span: colSpan,
      children: item
    }, itemKey);
    if (split && currentSpan % 24 === 0 && index < itemLength - 1) {
      return [colItem, /*#__PURE__*/(0, _jsxRuntime.jsx)(_col.default, {
        span: "24",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.default, {
          style: {
            marginTop: -8,
            marginBottom: 16
          },
          dashed: true
        })
      }, "line")];
    }
    return colItem;
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
    gutter: 24,
    justify: "start",
    children: [doms, submitter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_col.default, {
      span: spanSize.span,
      offset: 24 - spanSize.span - (totalSpan - spanSize.span) % 24,
      style: {
        textAlign: 'right'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.default.Item, {
        label: " ",
        colon: false,
        className: "pro-form-query-filter-actions",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.default, {
          collapsed: collapsed,
          collapseRender: needCollapseRender && currentSpan > 24 ? collapseRender : false,
          submitter: submitter,
          setCollapsed: setCollapsed
        }, "pro-form-query-filter-actions")
      })
    }, "submitter")]
  }, "resize-observer-row");
};
const defaultWidth = (0, _utils.isBrowser)() ? 0 : 1024;
function QueryFilter(props) {
  const {
    collapsed: controlCollapsed,
    layout,
    defaultCollapsed = true,
    defaultColsNumber,
    span,
    // eslint-disable-next-line
    searchText,
    // eslint-disable-next-line
    resetText,
    optionRender,
    collapseRender,
    onReset,
    onCollapse,
    labelWidth = 'auto',
    style,
    split,
    preserve = true,
    ignoreRules,
    ...rest
  } = props;
  const [width, setWidth] = (0, _utils.useMountMergeState)(() => typeof (style === null || style === void 0 ? void 0 : style.width) === 'number' ? style === null || style === void 0 ? void 0 : style.width : defaultWidth);
  const spanSize = (0, _react.useMemo)(() => getSpanConfig(layout, width + 16, span), [layout, width, span]);
  const showLength = (0, _react.useMemo)(() => {
    if (defaultColsNumber !== undefined) {
      return defaultColsNumber;
    }
    return Math.max(1, 24 / spanSize.span - 1);
  }, [defaultColsNumber, spanSize.span]);
  const labelFlexStyle = (0, _react.useMemo)(() => {
    if (labelWidth && spanSize.layout !== 'vertical' && labelWidth !== 'auto') {
      return `0 0 ${labelWidth}px`;
    }
    return undefined;
  }, [spanSize.layout, labelWidth]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcResizeObserver.default, {
    onResize: offset => {
      if (width !== offset.width) {
        setWidth(offset.width);
      }
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_wauBaseForm.default, {
      isKeyPressSubmit: true,
      preserve: preserve,
      ...rest,
      onReset: onReset,
      style: style,
      layout: spanSize.layout,
      fieldProps: {
        style: {
          width: '100%'
        }
      },
      formItemProps: {
        labelCol: {
          flex: labelFlexStyle
        }
      },
      groupProps: {
        titleStyle: {
          display: 'inline-block',
          marginRight: 16
        }
      },
      contentRender: (items, renderSubmitter, form) => /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryFilterContent, {
        spanSize: spanSize,
        collapsed: controlCollapsed,
        form: form,
        collapseRender: collapseRender,
        defaultCollapsed: defaultCollapsed,
        onCollapse: onCollapse,
        optionRender: optionRender,
        submitter: renderSubmitter,
        items: items,
        split: split,
        preserve: preserve,
        ignoreRules: ignoreRules,
        showLength: showLength
      })
    })
  }, "resize-observer");
}
var _default = QueryFilter;
exports.default = _default;