import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/es.array.flat-map.js";
import "core-js/modules/es.array.unscopables.flat-map.js";
import React, { useState, useContext, useEffect } from 'react';
import classNames from 'classnames';
import { FilterOutlined } from '@wii/icons';
import Form from '../form';
import ConfigProvider from '../config-provider';
import FilterDropdown from '../wau-filter-dropdown';
import FieldLabel from '../wau-field-label';
import { useIntl } from '../wau-provider';
import BaseForm from '../wau-base-form';
import './style';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 单行的查询表单，一般用于配合 table 或者 list使用 有时也会用于 card 的额外区域
 *
 * @param props
 */
const LightFilterContainer = props => {
  const {
    items,
    prefixCls,
    size = 'middle',
    collapse,
    collapseLabel,
    onValuesChange,
    bordered,
    values = {}
  } = props;
  const intl = useIntl();
  const lightFilterClassName = `${prefixCls}-light-filter`;
  const outsideItems = [];
  const collapseItems = [];
  const [open, setOpen] = useState(false);
  const [moreValues, setMoreValues] = useState(() => {
    return {
      ...values
    };
  });
  useEffect(() => {
    setMoreValues({
      ...values
    });
  }, [values]);
  items.forEach(item => {
    const {
      secondary,
      name
    } = item.props || {};
    if (secondary && !values[name] || collapse) {
      collapseItems.push(item);
    } else {
      outsideItems.push(item);
    }
  });
  const collapseLabelRender = () => {
    if (collapseLabel) {
      return collapseLabel;
    }
    if (collapse) {
      return /*#__PURE__*/_jsx(FilterOutlined, {
        className: `${lightFilterClassName}-collapse-icon`
      });
    }
    return /*#__PURE__*/_jsx(FieldLabel, {
      size: size,
      label: intl.getMessage('form.lightFilter.more', '更多筛选'),
      expanded: open
    });
  };
  return /*#__PURE__*/_jsx("div", {
    className: classNames(lightFilterClassName, `${lightFilterClassName}-${size}`, {
      [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => values[key])
    }),
    children: /*#__PURE__*/_jsxs("div", {
      className: `${lightFilterClassName}-container`,
      children: [outsideItems.map(child => {
        const {
          key
        } = child;
        return /*#__PURE__*/_jsx("div", {
          className: `${lightFilterClassName}-item`,
          children: /*#__PURE__*/React.cloneElement(child, {
            // proFieldProps 会直接作为 ProField 的 props 传递过去
            proFieldProps: {
              light: true,
              label: child.props.label,
              bordered
            },
            bordered
          })
        }, key);
      }), collapseItems.length ? /*#__PURE__*/_jsx("div", {
        className: `${lightFilterClassName}-item`,
        children: /*#__PURE__*/_jsx(FilterDropdown, {
          padding: 24,
          onVisibleChange: setOpen,
          visible: open,
          label: collapseLabelRender(),
          footer: {
            onConfirm: () => {
              onValuesChange({
                ...moreValues
              });
              setOpen(false);
            },
            onClear: () => {
              const clearValues = {};
              Object.keys(moreValues).forEach(key => {
                clearValues[key] = undefined;
              });
              setMoreValues(clearValues);
            }
          },
          children: collapseItems.map(child => {
            const {
              key
            } = child;
            const {
              name,
              fieldProps
            } = child.props;
            const newFieldProps = {
              ...fieldProps,
              onChange: e => {
                setMoreValues({
                  ...moreValues,
                  [name]: e !== null && e !== void 0 && e.target ? e.target.value : e
                });
                return false;
              }
            };
            // eslint-disable-next-line
            if (moreValues.hasOwnProperty(name)) {
              newFieldProps[child.props.valuePropName || 'value'] = moreValues[name];
            }
            return /*#__PURE__*/_jsx("div", {
              className: `${lightFilterClassName}-line`,
              children: /*#__PURE__*/React.cloneElement(child, {
                fieldProps: newFieldProps
              })
            }, key);
          })
        })
      }, "more") : null]
    })
  });
};
function LightFilter(props) {
  const {
    size,
    collapse,
    collapseLabel,
    initialValues,
    onValuesChange,
    form: userForm,
    bordered,
    // eslint-disable-next-line
    ignoreRules,
    ...reset
  } = props;
  const {
    getPrefixCls
  } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('pro-form');
  const [form] = Form.useForm();
  const realForm = userForm || form;
  const [values, setValues] = useState(() => {
    return {
      ...initialValues
    };
  });
  return /*#__PURE__*/_jsx(BaseForm, {
    size: size,
    initialValues: initialValues,
    form: realForm,
    contentRender: items => {
      return /*#__PURE__*/_jsx(LightFilterContainer, {
        prefixCls: prefixCls,
        items: items.flatMap(item => {
          if ((item === null || item === void 0 ? void 0 : item.type.displayName) === 'ProForm-Group') {
            return item.props.children;
          }
          return item;
        }),
        size: size,
        bordered: bordered,
        collapse: collapse,
        collapseLabel: collapseLabel,
        values: values,
        onValuesChange: newValues => {
          const newAllValues = {
            ...values,
            ...newValues
          };
          setValues(newAllValues);
          realForm.setFieldsValue(newAllValues);
          realForm.submit();
          if (onValuesChange) {
            onValuesChange(newValues, newAllValues);
          }
        }
      });
    },
    formItemProps: {
      colon: false,
      labelAlign: 'left'
    },
    fieldProps: {
      style: {
        width: undefined
      }
    },
    ...reset,
    onValuesChange: (_, allValues) => {
      setValues(allValues);
      if (onValuesChange) {
        onValuesChange(_, allValues);
      }
      realForm.submit();
    }
  });
}
export default LightFilter;