"use strict";

var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _classnames = _interopRequireDefault(require("classnames"));
var _styles = require("../../../base/styles");
var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
var _utils = require("../../../utils");
var _utils2 = require("../../../base/utils");
var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
var _templateObject;
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n  > .", " {\n    display: flex\n  }\n"])), _styles.Classes.filterIcon);
function Panel(_ref) {
  var ele = _ref.ele,
    filterIcon = _ref.filterIcon,
    hidePanel = _ref.hidePanel,
    renderPanelContent = _ref.renderPanelContent,
    hideFilterPopupHeader = _ref.hideFilterPopupHeader,
    popupParent = _ref.popupParent;
  var filterPanelRef = _react.default.useRef(null);
  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    position = _React$useState2[0],
    setPosition = _React$useState2[1];
  var style = {
    position: 'absolute',
    zIndex: 1050
  };
  var handleFilterPanelResize = function handleFilterPanelResize(resize) {
    setPosition((0, _utils.calculatePopupRelative)(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
  };
  (0, _react.useEffect)(function () {
    var resizeObserver = (0, _utils2.addResizeObserver)(filterPanelRef.current.children[0], handleFilterPanelResize);
    return function () {
      resizeObserver && resizeObserver.disconnect();
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: filterPanelRef
  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.default, {
    style: style,
    onClose: hidePanel,
    position: position,
    filterIcon: filterIcon,
    hideFilterPopupHeader: hideFilterPopupHeader
  }, renderPanelContent()));
}
function Filter(_ref2) {
  var _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 12 : _ref2$size,
    style = _ref2.style,
    className = _ref2.className,
    FilterPanelContent = _ref2.FilterPanelContent,
    filterIcon = _ref2.filterIcon,
    setFilter = _ref2.setFilter,
    setFilterModel = _ref2.setFilterModel,
    filterModel = _ref2.filterModel,
    isFilterActive = _ref2.isFilterActive,
    stopClickEventPropagation = _ref2.stopClickEventPropagation,
    stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
    hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
    getPopupParent = _ref2.getPopupParent,
    localeText = _ref2.localeText;
  var _React$useState3 = _react.default.useState(false),
    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
    showPanel = _React$useState4[0],
    setShowPanel = _React$useState4[1];
  var iconRef = _react.default.useRef(null);
  var iconWrapRef = _react.default.useRef();
  var hidePanel = function hidePanel() {
    return setShowPanel(false);
  };
  var renderPanelContent = function renderPanelContent() {
    if (FilterPanelContent) {
      return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
        setFilter: setFilter,
        filterModel: filterModel,
        isFilterActive: isFilterActive,
        hidePanel: hidePanel
      });
    } else {
      return /*#__PURE__*/_react.default.createElement(_DefaultFilterContent.default, {
        setFilterModel: setFilterModel,
        filterModel: filterModel,
        isFilterActive: isFilterActive,
        hidePanel: hidePanel,
        localeText: localeText
      });
    }
  };
  var handleIconClick = function handleIconClick(e) {
    // 只有当icon区域点击会触发面板展开
    // 防止 createPortal 区域的点击触发该事件
    if (e.currentTarget.contains(e.target)) {
      setShowPanel(true);
    }
    if (stopClickEventPropagation) {
      e.stopPropagation();
    }
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (e.keyCode === _keyCode.default.ESC) {
      if (e.currentTarget.contains(e.target)) {
        setShowPanel(false);
      }
      if (stopESCKeyDownEventPropagation) {
        e.stopPropagation();
      }
    }
  };
  var iconClassName = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, className, true), 'filter-panel-open', showPanel));
  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
  var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
  return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
    style: style,
    className: iconClassName,
    onClick: handleIconClick,
    onKeyDown: handleKeyDown,
    ref: iconWrapRef,
    tabIndex: -1
  }, /*#__PURE__*/_react.default.createElement("span", {
    ref: iconRef,
    className: _styles.Classes.filterIcon
  }, displayFilterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
    width: size,
    height: size
  })), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(Panel, {
    ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
    filterIcon: displayFilterIcon,
    hidePanel: hidePanel,
    renderPanelContent: renderPanelContent,
    hideFilterPopupHeader: hideFilterPopupHeader,
    popupParent: popupParent
  }), popupParent));
}
function _getPanelOffset(ele, hideFilterPopupHeader) {
  if (hideFilterPopupHeader) {
    return {
      x: 0,
      y: 0 - ele.offsetHeight
    };
  }
  return {
    x: HEADER_ICON_OFFSET_X,
    y: HEADER_ICON_OFFSET_Y
  };
}
var _default = exports.default = Filter;